this.$set用法与例子

this.$set()用法与例子

通常使用js改变某个值的时候，比如，this.from.text = '888'，发现打印的值改变，但视图却没有改变，因此
我门可以使用this.$set和 this.$nextTick强制刷新,这里只演示$set用法

，代码如下（示例）：

<template>
  <div >
    <div id="app">
        <div v-for="(item,index) in content" :key="index">
            {{item.name}}--{{item.age}}
        </div>
        <button @click="btntwo()">向from对象中添加属性</button>

        <div>{{from.text}}</div>
        <button @click="btnnoe()">动态改变值</button>  
    </div>
  </div>
</template>
<script>
/**
* 调用方法:this.$set(target,key,value)
* @target 要改变的数据源
* @key    要改变的具体数据
* @value  改变的值
*/
export default {
  data() {
    return {
      content:[
            {name:"小红",age:"1岁"},
            {name:"小白",age:"2岁"},
            {name:"小绿",age:"3岁"}
        ],
     from:{
         text:'666'
     }
    };
  },
  computed: {},
  methods: {
      btnnoe:function(){
            this.$set(this.from,'text','888');
        },
      btntwo:function(){
            let resLen=this.content.length;
            this.$set(this.content,resLen,{name:"小黑",age:"100岁"})
        },
      
  },
  mounted(){
    
  }
};
</script>
<style lang="scss" scoped>
#app{
    text-align: center;
    color: red;
}
</style>

---