console
new Vue({
el:"#app",
data:{
desc: "Hello world!",
user: {
tall: 155
},
list: []
},
mounted() {
setTimeout(()=>{
this.user = {
name: "李磊",
age: 18
};
let i= 0
while(i++<4) {
this.list.push(i);
}
},2000);
},
watch: {
user(val) {
console.log("user change");
},
"user.name" (val) {
console.log("user.name change");
},
'user.age' () {
console.log("user.age change");
},
'user.tall' () {
console.log("user.tall change");
}
}
})
<script src="//cdn.bootcss.com/vue/2.3.4/vue.js"></script><div id="app">
<h3 v-text="desc"></h3>
<h4 v-text="user.name"></h4>
<h4 v-text="user.age"></h4>
<input type="text" v-model="user.age"/>
<h5>{{list.length}}</h5>
<h5 v-if="list.length>1">长度大于1显示</h5>
<h5 v-if="list.length>2">长度大于2显示</h5>
<h5 v-if="list.length>3">长度大于3显示</h5>
</div>