vue watch深度监听对象实现数据联动效果

 更新时间:2018年08月16日 10:43:34   作者:琪思妙想  
这篇文章主要介绍了vue watch深度监听对象实现数据联动的方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

当对象内的某一个元素发生变化,判断对象另一元素,并进行赋值

<template>
  <input type="text" v-model="a.a1.a12"/>{{a.a1.a12}}
  <input type="text" v-model="a.a2.a22"/>{{a.a2.a22}}
</template>
<script>
  data(){
    retrun{
      a:{
        a1:{
          a12:12
        },
        a2:{
          a22:15
        }
      }
  },
  watch:{
    a:{
      handler(val.oldval){
        if(val.a1.a12<val.a2.a22){
          val.a2.a22=val.a1.a12;
        }
      },
      deep:true
    }
  }
</script>

总结

以上所述是小编给大家介绍的vue watch深度监听对象实现数据联动效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 解决Vue编译时写在style中的路径问题

    解决Vue编译时写在style中的路径问题

    下面小编就为大家带来一篇解决Vue编译时写在style中的路径问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vite+vue3+tsx项目打包后动态路由无法加载页面的问题及解决

    vite+vue3+tsx项目打包后动态路由无法加载页面的问题及解决

    这篇文章主要介绍了vite+vue3+tsx项目打包后动态路由无法加载页面的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 如何使用electron将vue项目打包成.exe文件(保姆级教程)

    如何使用electron将vue项目打包成.exe文件(保姆级教程)

    本文给大家介绍如何使用electron将vue项目打包成.exe文件,大家要注意一下vue2项目,使用的vue-element-admin框架,用electron打包成.exe文件,本文结合实例代码给大家介绍的非常详细,需要的朋友参考下吧
    2024-03-03
  • Vue2 的 diff 算法规则原理详解

    Vue2 的 diff 算法规则原理详解

    这篇文章主要介绍了Vue2的diff算法规则原理详解,diff 算法,就是通过比对新旧两个虚拟节点不一样的地方,针对那些不一样的地方进行新增或更新或删除操作。接下来我们详细介绍节点更新的过程
    2022-06-06
  • 如何使用 vxe-table 将行数据标记为删除状态

    如何使用 vxe-table 将行数据标记为删除状态

    vxe-table支持将数据标记为待删除状态,通过调用setPendingRow方法,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2025-01-01
  • vue实现页面刷新动画

    vue实现页面刷新动画

    这篇文章主要为大家详细介绍了vue实现页面刷新动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • VUE中使用HTTP库Axios方法详解

    VUE中使用HTTP库Axios方法详解

    本文将详细介绍在VUE中使用HTTP库Axios的详细方法,需要的朋友可以参考下
    2020-02-02
  • Vue.js在使用中的一些注意知识点

    Vue.js在使用中的一些注意知识点

    这篇文章主要给大家介绍了Vue.js在使用中的一些注意知识点,文中介绍的非常详细,对大家学习或者使用Vue.js具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-04-04
  • vue响应式更新机制及不使用框架实现简单的数据双向绑定问题

    vue响应式更新机制及不使用框架实现简单的数据双向绑定问题

    vue是一款具有响应式更新机制的框架,既可以实现单向数据流也可以实现数据的双向绑定。这篇文章主要介绍了vue响应式更新机制及不使用框架实现简单的数据双向绑定问题,需要的朋友可以参考下
    2019-06-06
  • vue中回调函数(callback)的用法举例

    vue中回调函数(callback)的用法举例

    这篇文章主要给大家介绍了关于vue中回调函数(callback)的用法举例,所谓的回调函数,就是由调用函数提供执行代码,被调用函数执行完毕之后,再自动执行的一个函数,需要的朋友可以参考下
    2023-08-08

最新评论