<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
td, th {
text-align: left;
}
.light {
color: #ff0000;
font-weight: bold;
}
</style>
</head>
<body>
<div id="box">
<input type="button" value="新增" @click="addUser"/>
<table style="width: 300px">
<tr>
<Th> ID </ th>
<Th> Name </ th>
<Th> Gender </ th>
<Th> Age </ th>
<Th> operation </ th>
</tr>
<tr v-for="(item, index) in list" id="_table">
<td>{{index + 1}}</td>
<td>{{item.name}}</td>
<Td: class = "item.sex == 'female' 'light': ''?"> {{Item.sex | sexFilter}} </ td> <- calculation using a three-head, dynamic class -! >
<td>{{item.age}}岁</td>
<td>
<input type="button" value="打印" @click="printUser(item)"/>
<input type="button" value="删除" @click="removeUser(index)"/>
</td>
</tr>
</table>
<br/>
<div>
<Input type = "button" value = "Get random number" @ click = "getPai" />
<label>{{random}}</label>
</div>
<br/>
<div>
<-! @Change event is triggered only in input loses focus ->
<input type="text" v-model="input1" @change="console.log('input1被修改为：', input1)"/>
<Label> Binding input box: {{input1}} </ label>
</div>
<br/>
<div>
<input type="text" v-model="input2"/>
<label v-if="input2%2 == 0">偶数</label>
<label v-if="Math.abs(input2%2) == 1">奇数</label>
<label v-if="Math.abs(input2%1) > 0 && Math.abs(input2%1) < 1">非整数</label>
</div>
<br/>
<Label v-show = "input2 == 666"> Congratulations trigger hidden tips! </ Label>
</div>
<script src="../vue.min.js"></script>
<script>
boxVue var = new view ({
el: '#box', // bind the id box of dom
data: {
list: [],
random: '', // random number
input1: '',
input2: 0
},
filters: {// interceptor, special data format for the general
sexFilter: function (val) {
if (val == "male") {
return "男";
} else if (val == "female") {
return "女";
}
return "unknown";
}
},
updated: function () {
this.$nextTick(function () {
// execute the callback DOM after the next update cycle. Using this method immediately after modifying the data, get the DOM updated.
console.log ( "3 == I can only wait for page rendering is over will be implemented immediately");
});
},
mounted: function performed) before {(// page initialization, initialization for the general data acquisition
var _this = this;
_this.queryList();
},
watch: {// for monitoring data changes
list: function () {// function name is the name of data variables, echoes
var _this = this;
console.log(_this.list);
Get less than before the table of html rendering //
// var dom_table = document.getElementById("_table");
// console.log(dom_table.innerHTML);
this. $ nextTick (function () {// page rendering finished, table where only data
var dom_table = document.getElementById("_table");
console.log(dom_table.innerHTML);
});
}
},
methods: {
queryList() {
var _this = this;
_this.list = [{
name: "Joe Smith"
sex: "male",
age: "15"
}, {
name: "John Doe"
sex: "female",
age: "16"
}, {
name: "Wang Hua"
sex: "unknown",
age: "17"
}];
},
addUser() {
var _this = this;
_this.list.push({
name: "Zhao six",
sex: "male",
age: "22"
});
},
removeUser(index) {
var _this = this;
_this.list.splice (index, 1); // The array element number deleted
},
printUser (item) {
alert (item.name + "this year" + item.age + "years old.");
},
getPai () {
var _this = this;
_this.random = Math.random()*10;
}
}
});
</script>
</body>
</html>