本文介绍了Vue.js中如何使用watch监听数据的变化，包括值类型的数据监听和引用类型的数据监听。通过实例展示了如何在值类型变化时执行回调函数，以及在引用类型数据变化时使用deep选项进行深度监听。同时，给出了两个实际案例，分别是简单的加减乘除运算和本地存储的todolist应用，进一步解释了watch在实际开发中的应用。
watch监听数据的变化执行回调函数
值类型的数据监听（字符串、数字、布尔、undefined—）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>watch监听</h1>
<button @click="num++">{{num}}</button>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
num: 5
}
},
watch: {
// 值类型的数据监听（字符串、数字、布尔、undefined—）
"num": {
handler(nval, oval) {
console.log("数据num", oval, "变化为", nval)
}
}
},
// 监听num数据的变化，执行回调函数handler
})
</script>
</body>
</html>watch监听 引用类型 需要添加deep选项
案例 简单的加减乘除运算
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>Watch监听</h1>
<input type="text" v-model.number="obj.pre">
<select name="" id="" v-model="obj.type">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">×</option>
<option value="/">÷</option>
</select>
<input type="text" v-model.number="obj.next">
=
{{obj.result}}
</div>
<script>
new Vue({
el: "#app",
data() {
return {
obj: {
pre: 1,
next: 1,
type: "+",
result: 2
}
}
},
watch: {
"obj": {
// 引用类型数据监听需要添加deep选项
// oval和nval都是最新的值
handler(nval, oval) {
// console.log("数据发生变化",nval,oval);
// 只要obj发生变化重新计算result的值
// eval将字符串转化为数字 强大且危险
this.obj.result = eval(`(${this.obj.pre})${this.obj.type}(${this.obj.next})`);
},
deep: true,
}
},
})
</script>
</body>
</html>案例 watch监听引用类型+本地存储 todolist
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" @keyup.enter="addItem">
<!-- 遍历数据list -->
<h3>未完成{{undolist.length}}</h3>
<div v-for="item in undolist" :key="item.title">
<input type="checkbox" v-model="item.done">
<span>{{item.title}}</span>
<button @click="delItem(item)">x</button>
</div>
<h3>已经完成{{donelist.length}}</h3>
<div v-for="item in donelist" :key="item.title">
<input type="checkbox" v-model="item.done">
<span>{{item.title}}</span>
<button @click="delItem(item)">x</button>
</div>
</div>
<script>
new Vue({
el:"#app",
computed:{
// 通过计算list算出undolist没有完成的列表
undolist(){
// 通过list过滤 返回item.done值为false的所有元素
return this.list.filter(item=>!item.done);
},
donelist(){
// 返回保留item.done值为true的元素
return this.list.filter(item=>item.done);
}
},
methods:{
// 删除元素
delItem(item){
// 查找item在list的下标
var ind = this.list.indexOf(item);
// 进行删除
this.list.splice(ind,1);
},
// 添加元素
addItem(e){
// e.target输入的文本框
// e.target.value 文本框的值
this.list.unshift({done:false,title:e.target.value})
// 清空文本框的内容
e.target.value = "";
}
},
data(){
return {
// list:[
// {done:true,title:"学习html"}
// ]
list: JSON.parse(localStorage.getItem("list") || "[]")
}
},
watch:{
"list":{
handler(){
localStorage.setItem("todo",JSON.stringify(this.list));
},
deep:true
}
}
})
// 目标：1 在文本框输入文字，按回车，文字添加到list里面
// 目标：2 单击x 删除当前行
// unshift在数组的前面添加一个元素
// splice（n，m，j） 从第n个删除m个，添加j
// indexOf(item) 查找item在列表的下标
</script>
</body>
</html>
393
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
