VUE对象的动态绑定

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/linzhefeng89/article/details/100136565

vue不检测对象的删除和添加

vue不能检测到对象的删除和添加，因为vue初始化实例的时候对属性进行一个get和set的过程，因此我们对象上的属性必须要在初始化的时候存在才可以进行动态的绑定的，以下的例子就是我们的没有添加对象的时候的动态绑定，例子是在iview Run上跑的地址是https://run.iviewui.com/aR1fG6zD：

<template>
  <div v-for="(value, key) in language">
      {{value}}
  </div>
  <Button @click="changeLanguage">
    改变
  </Button>
</template>
<script>
    export default {
        data () {
            return {
                language:{
                  zh:'中文',
                  en:'英文'
                }
            }
        },
      methods:{
        changeLanguage(){
          this.language.zh = "中国中文";
        }
      }
    }
</script>

那么我们可以直接在上面点击运行我们会在右侧看到如下的效果：

接着我们点击改变按钮，我们会发现我们的页面的值会随着变化而变化。

动态添加对象属性

还是基于我们上面的例子，我们进行改造，动态添加我们相关的对象,以下的例子就是我们动态添加的属性的例子，我们会看到我们动态添加的属性是不会生效的iview Run的地址是https://run.iviewui.com/9T4BnYxs：

<template>
  <div v-for="(value, key) in language">
      {{value}}
  </div>
  <Button @click="changeLanguage">
    改变
  </Button>
  <Button @click="addLanguageAttr">
    增加属性
  </Button>
</template>
<script>
    export default {
        data () {
            return {
                language:{
                  zh:'中文',
                  en:'英文'
                }
            }
        },
      methods:{
        changeLanguage(){
          this.language.zh = "中国中文";
        },
        addLanguageAttr(){
          console.log('属性添加前的值：'+JSON.stringify(this.language))
          this.language.tw = "中国繁体";
          console.log('属性添加前的值：'+JSON.stringify(this.language))
        }
      }
    }
</script>

动态添加对象属性的双向绑定的实现

那么我们如何添加我们自己定义的属性呢，实际上非常的简单直接使用下面的方式我们就可以快速的实现了：

this.$set(this.language, 'tw', '中国繁体')

实现的iview Run上的地址是：https://run.iviewui.com/bC1F0Qv2例子的代码：

<template>
  <div v-for="(value, key) in language">
      {{value}}
  </div>
  <Button @click="changeLanguage">
    改变
  </Button>
  <Button @click="addLanguageAttr">
    增加属性
  </Button>
</template>
<script>
    export default {
        data () {
            return {
                language:{
                  zh:'中文',
                  en:'英文'
                }
            }
        },
      methods:{
        changeLanguage(){
          this.language.zh = "中国中文";
        },
        addLanguageAttr(){
          console.log('属性添加前的值：'+JSON.stringify(this.language))
          this.$set(this.language, 'tw', '中国繁体')
          console.log('属性添加前的值：'+JSON.stringify(this.language))
        }
      }
    }
</script>

到此处我们就完成了vue对象的动态绑定