陣列用下標改變,或者物件增加屬性,這樣的改變資料是不能觸發檢視更新的,要用 vue.set(物件,屬性,值)或 this.$set(物件,屬性,值)
如下**,給 student物件新增 age 屬性
data () }}
眾所周知,直接給student賦值操作,雖然可以新增屬性,但是不會觸發檢視更新
mounted ()
原因是:受 es5 的限制,vue.js 不能檢測到物件屬性的新增或刪除。因為 vue.js 在初始化例項時將屬性轉為 getter/setter,所以屬性必須在 data 物件上才能讓 vue.js 轉換它,才能讓它是響應的。
要處理這種情況,我們可以使用$set()方法,既可以新增屬性,又可以觸發檢視更新。
但是,值得注意的是,網上一些資料寫的$set()用法存在一些問題,導致在新接觸這個方法的時候會走一些彎路!
錯誤寫法:this.$set(key,value)(ps: 可能是vue1.0的寫法)
mounted ()
正確寫法:this.$set(this.data,」key」,value』)
mounted ()
Vue2 0 set 的正確使用方式
vue.set 引數 引數 target keyvalue 返回值 設定的值。實現原理 vue.set 原始碼 import from observer index vue.set set this.set 原始碼 import from observer index vue.prototype.s...
Vue2 0 set 的正確使用方式
如下 給 student物件新增 age 屬性 data 眾所周知,直接給student賦值操作,雖然可以新增屬性,但是不會觸發檢視更新 mounted 原因是 受 es5 的限制,vue.js 不能檢測到物件屬性的新增或刪除。因為 vue.js 在初始化例項時將屬性轉為 getter setter...
Vue2 0 set 的正確使用方式
vue2.0給物件新增屬性,並出發檢視更新 如下 給student物件新增age屬性 data 眾所周知,直接給student賦值操作,雖然可以新增屬性,但是不會出發檢視更新 mounted 原因是 受 es5 的限制,vue.js 不能檢測到物件屬性的新增或刪除。因為 vue.js 在初始化例項時...