色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

vue object添加屬性

江奕云1年前8瀏覽0評論

在使用Vue的過程中,我們有時需要往Vue實例的對象上添加一些屬性或方法,這樣可以讓我們更好地擴展Vue應用的功能。在Vue中,我們可以使用Vue.set()方法、Vue.observable()方法或直接修改對象屬性等方式來添加屬性。

一、使用Vue.set()方法

Vue.set(obj, key, value);

具體用法如下:

var vm = new Vue({
data: {
obj: {}
}
});
Vue.set(vm.obj, 'name', 'tom');
console.log(vm.obj.name); //輸出tom

上述代碼中,我們創建了一個Vue實例,其data屬性中有一個空對象obj。通過Vue.set()方法,我們向該對象中添加了一個屬性name,其值為‘tom’。在控制臺中輸出vm.obj.name, 結果為‘tom’,說明添加成功。

二、使用Vue.observable()方法

var obj = Vue.observable({});
obj.name = 'tom';
console.log(obj.name); //輸出tom

如上代碼所示,我們同樣可以創建一個空對象obj,并通過obj.name = ‘tom’的形式向其中添加屬性。不同的是,在創建對象時我們使用了Vue.observable()方法,該方法會將對象轉化為響應式對象,當該對象的屬性發生變化時,Vue會自動更新視圖。

三、直接修改對象屬性

var vm = new Vue({
data: {
obj: {}
}
});
vm.obj.name = 'tom';
console.log(vm.obj.name); //輸出tom

上述代碼中,我們直接給Vue實例中的data屬性對象obj添加了屬性name,并將其值設為‘tom’。我們在控制臺中輸出vm.obj.name,結果也自然為‘tom’。然而,如果該屬性不在實例創建時就存在,而是后期添加的,那么Vue將不會監聽到它的變化。

總結:

添加屬性時,我們可以選擇使用Vue.set()方法或Vue.observable()方法,也可以直接修改屬性的值。Vue.set()方法適用于在Vue實例創建時就添加的屬性,Vue.observable()方法適用于后期添加的屬性,直接修改屬性則不推薦使用。此外還需要注意的是,使用Vue.observable()方法創建的對象是響應式的,其屬性變化會自動更新視圖。