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 watch深度监听对象如何实现数据联动效果。当你还是一只猫的时候,记着你的目标要成为一只虎。当你成为一只虎的时候,别忘了你曾经是一只猫。心态要高,姿态要低。不要看轻别人,更不要高估自己。更多关于vue watch深度监听对象如何实现数据联动效果请关注haodaima.com其它相关文章!

您可能有感兴趣的文章
Vue路由参数的传递与获取方式详细介绍

vue学习记录之动态组件浅析

如何解决ElementUI组件中el-upload上传图片不显示问题

解读element el-upload上传的附件名称不显示 file-list赋值

一篇关于el-table-column的formatter的如何使用及说明