$set是Vue.js中的一個方法,可以用于在Vue實例中給對象添加新屬性,或者修改已有屬性的值。舉個例子:
// 在Vue實例中定義一個對象 data: { person: { name: '張三', age: 20 } } // 使用$set方法添加屬性 this.$set(this.person, 'gender', '男'); console.log(this.person.gender); // 輸出:'男' // 使用$set方法修改屬性值 this.$set(this.person, 'age', 21); console.log(this.person.age); // 輸出:21
在上述代碼中,我們使用$set方法給person對象添加了一個gender屬性,同時也使用$set方法修改了person對象的age屬性值。這樣,Vue實例就能夠實時響應這些屬性的變化,不需要手動刷新頁面。
需要注意的是,當對象為一個數組時,$set方法也能夠修改數組元素的值。舉個例子:
// 在Vue實例中定義一個數組 data: { fruits: ['apple', 'banana', 'orange'] } // 使用$set方法修改數組元素 this.$set(this.fruits, 1, 'pear'); console.log(this.fruits[1]); // 輸出:'pear'
上述代碼中,我們使用$set方法修改了fruits數組中的第二個元素,將其修改為'pear'。同樣地,Vue實例也能夠實時響應該數組元素的變化。