Vue使用watch同时监听多个值的实现方法示例
更新时间：2023年05月31日 09:16:37 作者：灰太狼的情与殇
这篇文章主要为大家介绍了Vue中使用watch同时监听多个值的实现方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
正文
开发环境 vue2
电脑系统 windows11专业版
在使用vue开发的过程中,我们有时候需要使用到监听watch来获取对应的数据,接下来让我们看一下使用方法和同时监听多个值的
使用方法
废话不多说,直接上代码:
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);
}
}
//只触发了第一个监听的数据变化,第二个数据变化没有监听多,怎么解决呢?
使用computed
computed:{
dataChange () {
const {tempUrl, tagNameLists} = this;
return {tempUrl, tagNameLists};
}
}watch:{
dataChange:{
handler(newValue,oldValue) {
console.log("监听到了数据的变化",newValue);
},
deep: true
}
},
这样就实现了监听多个数据变化
本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。
以上就是Vue使用watch同时监听多个值的实现方法示例的详细内容，更多关于Vue中 watch监听多值的资料请关注脚本之家其它相关文章！
相关文章
使用Element ui Table组件动态控制列的显示隐藏方式
这篇文章主要介绍了使用Element ui Table组件动态控制列的显示隐藏方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-06-06
这篇文章主要为大家介绍了vue2项目增加eslint配置代码规范示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
vue开发chrome插件，实现获取界面数据和保存到数据库功能
这篇文章主要介绍了vue开发chrome插件，实现获取界面数据和保存到数据库功能的示例，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-12-12
这篇文章主要给大家介绍了关于Vue全局变量的定义及使用的相关资料,定义完全局变量后,我们可以在程序中的任何地方使用它们,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-09-09
vue使用html2canvas和jspdf将html转成pdf
在前端开发中, html转pdf是最常见的需求,下面这篇文章主要给大家介绍了关于vue如何使用html2canvas和jspdf将html转成pdf的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了vue监听滚动事件的方法，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-12-12
vue项目中常见的三种文件类型在线预览实现(pdf/word/excel表格)
最近在项目中要做一个pdf在线预览的功能,索性给大家整理个全面的,这篇文章主要给大家介绍了关于vue项目中常见的三种文件类型在线预览实现的相关资料,文件类型分别是pdf/word文件/excel表格,需要的朋友可以参考下2022-05-05
本文主要介绍了vue $attrs和$listeners的使用与区别，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
这篇文章主要介绍了vue使用WEB自带TTS实现语音文字互转,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
ElementUI 是一套ui组件库，目前最新版本 react 和 vue 等主流框架都有支持。该库默认主题色是天蓝色，若用于项目开发，难免遇到要需求修改其默认样式的情况，这篇文章主要介绍了ElementUI如何修改el-cascader的默认样式,需要的朋友可以参考下2023-12-12
最新评论