溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“vue中數據雙向綁定的方法”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue中數據雙向綁定的方法”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
代碼如下：
* Object.defineProperty()
* 對對象的屬性進行 定義/修改
* */
let obj = {x:10}
// 這兩種方式都相對來說比較簡單，直接，但是有些時候我們需要對對象的屬性的修改和增加進行必要的干預
// obj.y = 20;
// obj.x = 100;
// obj.x = 'abc';
//
// let arr = [1,2,3];
// arr.length = 'abc';//不可更改
// console.log(arr);
// console.log(obj.x);
// delete obj.x;
// console.log(obj);
Object.defineProperty(obj, 'y', {
configurable: false, //設置是否可刪除 false為不可刪除
value: 100
});
console.log(obj);
delete obj.y;//刪除
console.log(obj);
//設置對象某個屬性值的時候，順便設置它的屬性。enumerable 可枚舉 configurable 可以刪除否 writable 可改值否
Object.defineProperty(obj, 'z', {//enumerable 可枚舉(沒有則新添加)
enumerable: true,//為false時，for..in object.keys json.stringfy 不能取到該z屬性
value: 10000
});
for (var attr in obj) {
console.log(attr);
}
Object.defineProperty(obj, 'm', {
writable: false,//可更改
value: 9
});
console.log(obj);
obj.m = 100;
console.log(obj);以上總結了對象的defineProperty四個屬性：configurable，enumerable，value，writable
接下來再深入認識下它的另外兩個方法：set 以及get
注意：get和set不能與configurable，enumerable，value，writable同時存在
let obj = {x:10}
let y = 100;
Object.defineProperty(obj, 'y', {
get() {
//當obj的y屬性被調用的時候觸發，該方法的返回值將作為獲取的結果
console.log('get');
return y;
},
set(value) {
//當obj的y屬性被設置的時候觸發
console.log('set', value);
y = value;
}
})
console.log(obj.y);
obj.y = 1;
console.log(obj.y);
介紹完defineProperty了，最后我們一起看看如何簡單的實現數據雙向綁定吧！
<body>
<input type="text" id="age">
<h2></h2>
<script>
var ageElement = document.querySelector('#age');
var h2Element = document.querySelector('h2');
let obj = {};
Object.defineProperty(obj, 'age', {
get() {
},
set(value) {
ageElement.value = value;
h2Element.innerHTML = value;
}
})
obj.age = 10;
ageElement.oninput = function() {
obj.age = this.value;
}
</script>
讀到這里，這篇“vue中數據雙向綁定的方法”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
