<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model.lazy=" message ">
<p>
{{ message }}
</p>
<ul>
<li v-for="(item,i) in arr">
{{ item.new | formatStr1 }} {{ item.old | formatStr2 }}
</li>
</ul>
<input type="text" v-model="userName">
<input type="text" v-model="info.userName">
<input type="text" v-model="user.age">
</div>
<script>
const app =new Vue ({
el: "#app",
data: {
message: "Hello Vue!",
userName: "admin",
arr:[],
info:{
userName:"222"
},
user:{
age:18
}
},
watch:{
/* 监听器 就是监视数据的变化 监听那个字符串 那么函数名就是哪个 newVal是变化前的新值 oldVal是变化后的新值
使用场景可以用于 实时判断用户名是否存在
*/
message(newVal,oldVal){
let str='新值:'+newVal+'****旧值:'+oldVal
this.arr.push({
new: newVal,
old: oldVal
});
},
/* 定义对象的监听器 */
userName:{
handler(newVal,oldVal){
console.log(newVal,oldVal)
},
immediate: false /* true 一进浏览器旧触发 false不触发 */
},
/* 定义对象的监听器 */
info:{
handler(newVal,oldVal){
console.log(newVal,oldVal)
},
deep: true /* 是否深度监听 那样就可以监听对象的变化 true为是 */
},
/* 如果要监听对象的某个值 比如这里的user.age 必须包裹一层双引号或者单引号 */
"user.age"(newVal,oldVal){
console.log(newVal,oldVal)
}
},
filters:{
formatStr1(val){
return '新值:'+val;
},
formatStr2(val){
return '旧值:'+val;
}
}
})
</script>
</body>
</html>
vue中的监听器的利用与用法watch
最新推荐文章于 2023-09-27 10:21:03 发布