溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“如何使用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具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和dom，可以大大提升訪問速度和用戶體驗。
關于“如何使用vue代碼實現數據雙向綁定”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
