欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue中的$set的使用實例代碼

 更新時間:2018年10月08日 16:00:47   作者:where_slr  
這篇文章主要介紹了Vue中的$set的使用,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下

Vue —$set

在我們使用vue進(jìn)行開發(fā)的過程中,可能會遇到一種情況:當(dāng)生成vue實例后,當(dāng)再次給數(shù)據(jù)賦值時,有時候并不會自動更新到視圖上去;

當(dāng)我們?nèi)タ磛ue文檔的時候,會發(fā)現(xiàn)有這么一句話:如果在實例創(chuàng)建之后添加新的屬性到實例上,它不會觸發(fā)視圖更新。

如下代碼,給 student對象新增 age 屬性

data () {
  return {
    student: {
      name: '',
      sex: ''
    }
  }
}
mounted () { // ——鉤子函數(shù),實例掛載之后
  this.student.age = 24
}

原因是:受 ES5 的限制,Vue.js 不能檢測到對象屬性的添加或刪除。因為 Vue.js 在初始化實例時將屬性轉(zhuǎn)為 getter/setter,所以屬性必須在 data 對象上才能讓 Vue.js 轉(zhuǎn)換它,才能讓它是響應(yīng)的。

要處理這種情況,我們可以使用$set()方法,既可以新增屬性,又可以觸發(fā)視圖更新。

但是,值得注意的是,網(wǎng)上一些資料寫的$set()用法存在一些問題,導(dǎo)致在新接觸這個方法的時候會走一些彎路!

錯誤寫法:this.$set(key,value)(ps: 可能是vue1.0的寫法)

mounted () {
  this.$set(this.student.age, 24)
}

正確寫法:this.$set(this.data,”key”,value')

mounted () {
  this.$set(this.student,"age", 24)
}

總結(jié)

以上所述是小編給大家介紹的Vue中的$set的使用,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

最新評論