美文网首页web前端开发让前端飞
vue watch深度监听对象实现数据联动效果

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

作者: 88b61f4ab233 | 来源:发表于2018-11-13 17:55 被阅读2次

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

<template>
  <input type="text" v-model="a.a1.a12"/>{{a.a1.a12}}
  <input type="text" v-model="a.a2.a22"/>{{a.a2.a22}}
</template>//前端全栈交流学习圈:866109386
<script>//帮助1-3年前端人员,突破技术瓶颈,提升思维能力
  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监听数据 1、监听普通的变量 1、vue.js里面直接用watch监听对象变量,如果对象变量的属性发...

  • 微信小程序之watch属性值(仿Vue)

    Vue通过监听watch属性来观测Vue实例数据的变化。 监听器的原理,将data中需监听的属性写在watch对象...

  • vue中如何深度监听一个对象?

    来源:雨中愚-vue中如何深度监听一个对象? 大家都知道,Vue项目中对数据的监听,提供了一个很好的钩子watch...

  • vue watch监听对象属性

    watch的作用:监听vue实例上数据的变动 示例: 一、监听对象 使用deep属性,如果queryData对象内...

  • vue对象watch(深度监听)

    immediate使用watch时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。...

  • vue项目中常见问题及解决方法

    一、常用methods 1、三级联动 需要设置watch 监听 ---实现重新选择省时候,清空市和区 2、vue+...

  • Vue.js 监听属性

    介绍下Vue.js监听属性watch,我们可以通过watch来响应数据的变化。以下实例通过使用watch实现计数器...

  • vue watch deep无效解决

    最近写项目,子组件通过props接收父组件的数据,在子组件中使用watch监听 deep深度监听对象 当监听的是对...

  • vue监听和webpack基本使用

    vue监听 使用keyup监听 使用watch监听文本框变化,watch 使用这个属性可以监视data中的数据变化...

网友评论

    本文标题:vue watch深度监听对象实现数据联动效果

    本文链接:https://www.haomeiwen.com/subject/qfwlfqtx.html