您好,登錄后才能下訂單哦!
這篇文章主要介紹“如何使用vue代碼實(shí)現(xiàn)數(shù)據(jù)雙向綁定”的相關(guān)知識,小編通過實(shí)際案例向大家展示操作過程,操作方法簡單快捷,實(shí)用性強(qiáng),希望這篇“如何使用vue代碼實(shí)現(xiàn)數(shù)據(jù)雙向綁定”文章能幫助大家解決問題。
代碼如下:
* Object.defineProperty() * 對對象的屬性進(jìn)行 定義/修改 * */ let obj = {x:10} // 這兩種方式都相對來說比較簡單,直接,但是有些時候我們需要對對象的屬性的修改和增加進(jìn)行必要的干預(yù) // 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, //設(shè)置是否可刪除 false為不可刪除 value: 100 }); console.log(obj); delete obj.y;//刪除 console.log(obj); //設(shè)置對象某個屬性值的時候,順便設(shè)置它的屬性。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);
以上總結(jié)了對象的defineProperty四個屬性:configurable,enumerable,value,writable
接下來再深入認(rèn)識下它的另外兩個方法:set 以及get
注意:get和set不能與configurable,enumerable,value,writable同時存在
let obj = {x:10} let y = 100; Object.defineProperty(obj, 'y', { get() { //當(dāng)obj的y屬性被調(diào)用的時候觸發(fā),該方法的返回值將作為獲取的結(jié)果 console.log('get'); return y; }, set(value) { //當(dāng)obj的y屬性被設(shè)置的時候觸發(fā) console.log('set', value); y = value; } }) console.log(obj.y); obj.y = 1; console.log(obj.y);
效果圖:
介紹完defineProperty了,最后我們一起看看如何簡單的實(shí)現(xiàn)數(shù)據(jù)雙向綁定吧!
<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具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢,Vue中頁面使用的是局部刷新,不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom,可以大大提升訪問速度和用戶體驗(yàn)。
關(guān)于“如何使用vue代碼實(shí)現(xiàn)數(shù)據(jù)雙向綁定”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識,可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會為大家更新不同的知識點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。