VUE对象的动态绑定

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对象的动态绑定

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__0809 返回首页
实付 49.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值