1.开发环境 vue2
2.电脑系统 windows11专业版
3.在使用vue开发的过程中,我们有时候需要使用到监听watch来获取对应的数据,接下来让我们看一下使用方法和同时监听多个值的使用方法。
4.废话不多说,直接上代码:
watch:{
"tempUrl"(newValue,oldValue){
console.log("我是监听的新数据",newValue);
console.log("我是监听的旧数据",oldValue);
}
}
文章图片
这种写法能监听多数据的变化,现在感觉是没有问题的//当我需要监听多个值变化的时候
watch:{
"tempUrl"(newValue,oldValue){
console.log("我是监听的新数据",newValue);
console.log("我是监听的旧数据",oldValue);
},
"tagNameLists"(newValue,oldValue){
console.log("我是视频标签显示新数据",newValue);
console.log("我是视频标签显示旧数据",oldValue);
// this.getRdata(newValue);
}
}
文章图片
//只触发了第一个监听的数据变化,第二个数据变化没有监听多,怎么解决呢?5.使用computed:
computed:{
dataChange () {
const {tempUrl, tagNameLists} = this;
return {tempUrl, tagNameLists};
}
}watch:{
dataChange:{
handler(newValue,oldValue) {
console.log("监听到了数据的变化",newValue);
},
deep: true
}
},
文章图片
这样就实现了监听多个数据变化【Vue中使用watch同时监听多个值的实现方法】6.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。
推荐阅读
- java项目精品实战案例|基于Java+SpringBoot+vue+node.js实现直行车租赁平台管理系统
- Vue3.0|Ant Design Vue表单验证基本操作
- 前端|Vue组件六种通信方式的优缺点及应用场景
- Vue|Vue组件通信常用的的几种方式
- vue3|vue3.0常用的composition API
- Vue.js入门到精通|Vue中的Vuex详解
- Vue.js入门到精通|Vue.js官方的路由管理器 带你快速入门
- javascript|vue学生管理系统
- 计算机毕业设计|Java项目（基于springboot+vue的学生宿舍管理系统—计算机毕业设计）