<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
/* 作用，带有v-cloak属性的标签，在未渲染完成前不显示，避免显示mustache标签例如{{name}}这种*/
[v-cloak] {
display: none;
}
td, th {
text-align: left;
}
.light {
color: #ff0000;
font-weight: bold;
}
</style>
</head>
<body>
<div id="box" v-cloak>
<input type="button" value="新增" @click="addUser"/>
<!-- 循环生成dom的例子 -->
<table style="width: 300px">
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr v-for="(item, index) in list" id="_table" :ref="'id' + index">
<td>{{index + 1}}</td>
<td>{{item.name}}</td>
<!-- 动态属性,active为动态的样式名，是否存在依靠flag的真假来判断 -->
<td :class="{light: item.sex == 'female'}">{{item.sex | sexFilter}}</td>
<td>{{item.age}}岁</td>
<td>
<input type="button" value="打印" @click="printUser(item, index)"/>
<input type="button" value="删除" @click="removeUser(index)"/>
</td>
</tr>
</table>
<br/>
<div>
<input type="button" value="获取随机数" @click="getPai"/>
<label>{{random}}</label>
</div>
<br/>
<div>
<!-- @change事件，在input失去焦点才触发 -->
<input type="text" v-model="input1"/>
<label>绑定输入框：{{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">恭喜触发隐藏提示！</label>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var _this;
var boxVue = new Vue({
el: '#box', // 绑定id为box的dom
data: {
list: [],
random: '', //随机数
input1: '',
input2: 0
},
filters: { // 拦截器，一般用于格式化特殊数据
sexFilter: function (val) {
if (val == "male") {
return "男";
} else if (val == "female") {
return "女";
}
return "未知";
}
},
updated: function () {
this.$nextTick(function () {
//在下次 DOM 更新循环结束之后执行这个回调。在修改数据之后立即使用这个方法，获取更新后的DOM.
console.log("3==我只能等页面渲染完了才会立即执行");
});
},
mounted: function () { // 页面初始化之前执行，一般用于初始化获取数据
_this = this;
_this.queryList();
},
watch: { // 用于监听数据变化
list: function() { // 函数名就是data中的变量名，相呼应
console.log(_this.list);
// 渲染前获取不到table的html
// var dom_table = document.getElementById("_table");
// console.log(dom_table.innerHTML);
this.$nextTick(function () { // 页面渲染完，table里才有数据
var dom_table = document.getElementById("_table");
console.log(dom_table.innerHTML);
});
}
},
methods: {
queryList() {
_this.list = [{
name: "张三",
sex: "male",
age: "15"
}, {
name: "李四",
sex: "female",
age: "16"
}, {
name: "王华",
sex: "unknown",
age: "17"
}];
},
addUser() {
_this.list.push({
name: "赵六",
sex: "male",
age: "22"
});
},
removeUser(index) {
_this.list.splice(index, 1); // vue自带的根据对象删除数组中的内容
},
printUser(item, index) {
alert(item.name + "今年" + item.age + "岁。页面DOM为：\n" + _this.$refs['id' + index][0].innerHTML);
},
getPai() {
_this.random = Math.random()*10;
}
}
});
</script>
</body>
</html>
