vue watch关于对象内的属性监听

 更新时间:2019年04月22日 16:08:47   作者:宝贝QY  
这篇文章主要介绍了vue watch关于对象内的属性监听的相关知识,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下

vue可以通过watch监听data内数据的变化。通常写法是:

data: {
 a: 100
},
watch: {
 a(newval, oldVal) {
  // 做点什么。。。
  console.log(newval, oldVal)
 }
} 

vue监听整个对象,如下:

•deep: true 深度监测

data: {
 return {
  msg: {
   name: 'hahah',
   color: 'red'
  }
 }
}
watch: {
 msg: {
  handler(newValue, oldValue) {
   // 做点什么。。。
   console.log(newValue)
 },
 deep: true
} 

如果监听对象内的某一具体属性,可以通过computed做中间层来实现:

computed: {
 name() {
  return this.msg.name
 }
},
watch:{
 name(newValue, oldValue) {
   // 做点什么。。。
   console.log(newval, oldVal)
 }
} 

总结

以上所述是小编给大家介绍的vue watch关于对象内的属性监听的相关知识,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

相关文章

  • 详解vue + vuex + directives实现权限按钮的思路

    详解vue + vuex + directives实现权限按钮的思路

    这篇文章主要介绍了详解vue + vuex + directives实现权限按钮的思路,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • vue3自定义dialog、modal组件的方法

    vue3自定义dialog、modal组件的方法

    这篇文章主要介绍了vue3自定义dialog、modal组件的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-01-01
  • 基于vite2+Vue3编写一个在线帮助文档工具

    基于vite2+Vue3编写一个在线帮助文档工具

    提起帮助文档,想必大家都会想到 VuePress等。但是VuePress是“静态网站生成器”,需要我们自行编写文档,然后交给VuePress变成网站。因此,本文将用vite2+Vue3编写一个在线帮助文档工具,需要的可以参考一下
    2022-03-03
  • vue3获取url地址参数的示例详解

    vue3获取url地址参数的示例详解

    这篇文章主要介绍了vue3获取url地址参数,Vue3 获取地址栏参数有两个方式:查询参数和路径参数,文中结合示例代码给大家详细讲解,需要的朋友可以参考下
    2023-04-04
  • vue2.0 better-scroll 实现移动端滑动的示例代码

    vue2.0 better-scroll 实现移动端滑动的示例代码

    本篇文章主要介绍了vue2.0 better-scroll 实现移动端滑动的示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2018-01-01
  • Vue关于组件化开发知识点详解

    Vue关于组件化开发知识点详解

    在本篇文章里,小编给大家分享的是关于Vue关于组件化开发知识点详解内容,有兴趣的朋友们可以学习下。
    2020-05-05
  • Vue+Openlayer使用modify修改要素的完整代码

    Vue+Openlayer使用modify修改要素的完整代码

    这篇文章主要介绍了Vue+Openlayer使用modify修改要素的完整代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-09-09
  • vant组件库之tag渐变色不起作用的原因及解决

    vant组件库之tag渐变色不起作用的原因及解决

    这篇文章主要介绍了vant组件库之tag渐变色不起作用的原因及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue3实现无缝滚动组件的示例代码

    vue3实现无缝滚动组件的示例代码

    在日常开发中,经常遇到需要支持列表循环滚动展示,特别是在数据化大屏开发中,所以小编今天为大家介绍一下如何利用vue3实现一个无缝滚动组件吧
    2023-09-09
  • 手把手教你Vue3实现路由跳转

    手把手教你Vue3实现路由跳转

    Vue Router是Vue.js的官方路由器,它与Vue.js核心深度集成,使使用Vue.js构建单页应用程序变得轻而易举,下面这篇文章主要给大家介绍了关于Vue3实现路由跳转的相关资料,需要的朋友可以参考下
    2022-08-08

最新评论