了解vue中的watch侦听器和deep深度监听
了解vue中的watch侦听器和deep选项,如何深度监听对象
·
注意:一定要把表单里v-model的值在data节点下定义初始化属性!!!
watch侦听器允许开发者监视数据的变化 从而对数据的变化做特定的操作
所有的侦听器都应该被定义在watch节点下
案例:输入框里每输入一个值 侦听器都能监听到
<template>
<div class="news">
<p>侦听器</p>
<input type="text" v-model="listens">
</div>
</template>
<script>
export default {
name: "hello",
data() {
return {
listens:"", // 侦听器
};
},
methods: {
},
// 侦听器
watch:{
listens(newVal,oldVal){
console.log('新输入的值'+newVal+',上一次输入的值'+oldVal);
}
}
};
</script>
如果要监听的是对象 则需要使用deep选项 设置为true即可
关于handler 全局搜索里只有一个 我也不太理解 为何加上这个
<template>
<div class="news">
<p>侦听器</p>
<input type="text" v-model="info.username">
</div>
</template>
<script>
export default {
name: "hello",
data() {
return {
info: //用户的信息对象
{
username:'admin',
}
};
},
methods: {
},
// 侦听器
watch:{
// listens(newVal,oldVal){
// console.log('新输入的值'+newVal+',上一次输入的值'+oldVal);
// }
info:{
handler(newVal){
console.log(newVal);
},
deep:true //开启深度监听 只要对象中任何一个属性变化 都会触发'对象的侦听器'
}
}
};
</script>
更多推荐
已为社区贡献15条内容
所有评论(0)