建站
咨詢
售后
建站咨詢
新聞中心
如何在Vue中使用$set？相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。
創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、安國(guó)網(wǎng)絡(luò)推廣、重慶小程序開發(fā)公司、安國(guó)網(wǎng)絡(luò)營(yíng)銷、安國(guó)企業(yè)策劃、安國(guó)品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供安國(guó)建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18982081108，官方網(wǎng)址：www.cdcxhl.com
Vue —$set
在我們使用vue進(jìn)行開發(fā)的過程中，可能會(huì)遇到一種情況：當(dāng)生成vue實(shí)例后，當(dāng)再次給數(shù)據(jù)賦值時(shí)，有時(shí)候并不會(huì)自動(dòng)更新到視圖上去；
當(dāng)我們?nèi)タ磛ue文檔的時(shí)候，會(huì)發(fā)現(xiàn)有這么一句話：如果在實(shí)例創(chuàng)建之后添加新的屬性到實(shí)例上，它不會(huì)觸發(fā)視圖更新。
如下代碼，給 student對(duì)象新增 age 屬性
data () {
return {
student: {
name: '',
sex: ''
}
}
}
mounted () { // ——鉤子函數(shù)，實(shí)例掛載之后
this.student.age = 24
}原因是：受 ES5 的限制，Vue.js 不能檢測(cè)到對(duì)象屬性的添加或刪除。因?yàn)?Vue.js 在初始化實(shí)例時(shí)將屬性轉(zhuǎn)為 getter/setter，所以屬性必須在 data 對(duì)象上才能讓 Vue.js 轉(zhuǎn)換它，才能讓它是響應(yīng)的。
要處理這種情況，我們可以使用$set()方法，既可以新增屬性,又可以觸發(fā)視圖更新。
但是，值得注意的是，網(wǎng)上一些資料寫的$set()用法存在一些問題，導(dǎo)致在新接觸這個(gè)方法的時(shí)候會(huì)走一些彎路！
錯(cuò)誤寫法：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)
}看完上述內(nèi)容，你們掌握如何在Vue中使用$set的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
當(dāng)前文章：如何在Vue中使用$set
標(biāo)題URL：http://fisionsoft.com.cn/article/psigog.html
