$set是Vue提供的一個全局方法,用于給Vue實例添加響應式屬性,動態(tài)修改數(shù)據。Vue在初始化響應式數(shù)據時,只會對對象的已有屬性進行響應式處理。如果需要動態(tài)添加屬性,需要使用$set方法。下面是$set的用法示例:
//在Vue實例中添加一個空對象 data() { return { userInfo: {} } } //為userInfo動態(tài)添加屬性 this.$set(this.userInfo, 'name', 'Tom')
上述代碼中,我們先定義了一個空對象userInfo,然后使用$set方法動態(tài)為其添加了屬性name,屬性值為Tom。此時,Vue會將這個屬性加入到響應式系統(tǒng)中,當屬性值發(fā)生變化時,Vue會自動更新視圖。
除了對象,$set方法也可以用于數(shù)組,用于添加新的元素或修改已有元素:
//在Vue實例中添加一個空數(shù)組 data() { return { list: [] } } //為list動態(tài)添加元素 this.$set(this.list, 0, 'apple') this.list.push('orange') //等同于this.$set(this.list, 1, 'orange') //修改已有元素 this.$set(this.list, 0, 'banana')
上述代碼中,我們先定義了一個空數(shù)組list,然后使用$set方法動態(tài)為其添加了第一個元素apple,也可以用push方法添加新元素orange。接著使用$set方法修改已有元素0的值為banana。這樣,Vue就能夠正確地偵測到數(shù)組中元素的變化,自動更新視圖。
總之,$set方法是一個非常有用的工具,可以幫助我們處理動態(tài)添加屬性或元素的情況,讓Vue實例更加靈活、強大。
下一篇h5 json上傳