watch-监视对象数据的变化（2）

//html准备

<div id="app">

　　<label for="userName">用户名：</label>

　　<input type="text" id="userName" v-model="userName">

　　<span v-show="isError">用户名长度为 6~12 个字符</span>

　　

　　<p>

　　　　<input type="text" v-model="user.age">

　　</p>

</div>

// 监视的对象一定是data里的对象

data: {　　

　　user: {

　　　　userName: '',

　　　　age: 19

　　}

},

// 监视对象里的每一个数据的变化

watch: {

　　 //  对象中任意一个属性变化了, 就触发下面的 handler 函数

　　 // 数据变化时要执行的函数

　　user：{

　　　　handler (curVal, oldVal)  {

　　　　　　if (curVal.userName.length < 6 || curVal.userName.length > 12) {

　　　　　　　　this.isError = true

　　　　　　} else {

　　　　　　　　this.isError = false

　　　　　　}

　　　　},

　　 // 深度监听, 只要对象中属性变化了, 那么设置为true, 就可以监视到对象的变化了

　　deep: true,

　　 // 立即去触发一次监视

　　immediate：true

　}

}

 

 

// 监视对象里的一个属性的变化

vatch: {

　　'user.age'  (curVal, oldVal)  {

　　　　

　　}

}

转载于:https://www.cnblogs.com/congtt/p/9537826.html