vue—watch深度监听与immediate
可以在watch增加判断,当符合条件时改变data中的数据
如果要监听的是对象 则需要使用deep选项 设置为true即可
<div id="app">
<p><input type="text" name="" id="" v-model="pig.name"></p>
<p><input type="text" name="" id="" v-model="pig.age"></p>
<p>姓名:{{pig.name}}</p>
<p>性别:{{pig.sex}}</p>
<p>年龄:{{pig.age}}</p>
<p>身高:{{pig.height}}</p>
</div>
JavaScript
var vm = new Vue({
el: '#app',
data: {
pig: {
name: '戴小姐',
sex: '女',
age: '18',
height: '160'
}
},
watch: {
pig: {
handler(newVal) {
console.log(newVal.name);
if (newVal.name == '王先生') {
newVal.age = 19;
newVal.sex = '男';
newVal.height = '185';
}
},
immediate: false,
deep: true
}
}
})
代码演示:
属性:该值默认是false,在进入页面时,第一次绑定值,watch不会"立刻执行"监听,只有数据发生改变才会执行handler中的操作。
immediate:false,值为true或false,默认false
immediate:true,----刚进入页面的时候,watch可以立刻监听到对象中属性的值。
immediate:false时:
immediate:true时:
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果