快捷導(dǎo)航

VUE 實(shí)現(xiàn)動態(tài)給對象增加屬性，并觸發(fā)視圖更新操作示例

更新時(shí)間：2019年11月29日 11:52:20 作者：自由港

這篇文章主要介紹了VUE 實(shí)現(xiàn)動態(tài)給對象增加屬性，并觸發(fā)視圖更新操作,涉及vue.js對象屬性動態(tài)操作及視圖更新相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了VUE 實(shí)現(xiàn)動態(tài)給對象增加屬性，并觸發(fā)視圖更新操作。分享給大家供大家參考，具體如下：

在開發(fā)過程中，我們時(shí)常會遇到這樣一種情況：當(dāng)vue的data里邊聲明或者已經(jīng)賦值過的對象或者數(shù)組（數(shù)組里邊的值是對象）時(shí)，向?qū)ο笾刑砑有碌膶傩?，如果更新此屬性的值，是不會更新視圖的。

根據(jù)官方文檔定義：如果在實(shí)例創(chuàng)建之后添加新的屬性到實(shí)例上，它不會觸發(fā)視圖更新。

Vue 不允許在已經(jīng)創(chuàng)建的實(shí)例上動態(tài)添加新的根級響應(yīng)式屬性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法將響應(yīng)屬性添加到嵌套的對象上。

我們編寫如下代碼測試給一個(gè)對象動態(tài)添加屬性：

<div id="app">
  <input v-model="form.amount" /> 
  <input type="button" @click="demoSet()" value="setName">
</div>
<script type="text/javascript">
var vm=new Vue({
  el: "#app",
  data: {
    i:0,
    form:{}
  },
  methods:{
    demoSet(){
      this.form.amount=this.i++;
      //this.$set(this.form,"amount",this.i++);
    }
  }
  });
</script>

這種方式可以給form增加一個(gè)屬性，但是不會界面不會響應(yīng)更新。

正確的做法：

<div id="app">
  <input v-model="form.amount" /> 
  <input type="button" @click="demoSet()" value="setName">
</div>
<script type="text/javascript">
var vm=new Vue({
  el: "#app",
  data: {
    i:0,
    form:{}
  },
  methods:{
    demoSet(){
      this.$set(this.form,"amount",this.i++);
    }
  }
  });
</script>

這樣就可以給對象添加amount 屬性了。

這個(gè)有什么應(yīng)用場景呢，比如 data.form 屬性很多，其中大部分是不需要要的，這時(shí)候，可以使用這種方法實(shí)現(xiàn)動態(tài)添加需要的屬性。

需要注意的是，這種方式是不能給根數(shù)據(jù)添加屬性的，比如：

<div id="app">
  <input v-model="name" /> 
  <input type="button" @click="demoSet()" value="setName">
</div>
<script type="text/javascript">
var vm=new Vue({
  el: "#app",
  data: {
  },
  methods:{
    demoSet(){
      this.$set(this,"name","ray");
    }
  }
  });
</script>

這種方式給data 增加一個(gè) name 屬性是無效的。

希望本文所述對大家vue.js程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: