本文小編為大家詳細介紹“vue中數(shù)據(jù)雙向綁定的方法”,內(nèi)容詳細,步驟清晰,細節(jié)處理妥當,希望這篇“vue中數(shù)據(jù)雙向綁定的方法”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。
專注于為中小企業(yè)提供網(wǎng)站設(shè)計、網(wǎng)站制作服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)子長免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都,凝聚了一批互聯(lián)網(wǎng)行業(yè)人才,有力地推動了成百上千家企業(yè)的穩(wěn)健成長,幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。
代碼如下:
* Object.defineProperty() * 對對象的屬性進行 定義/修改 * */ let obj = {x:10} // 這兩種方式都相對來說比較簡單,直接,但是有些時候我們需要對對象的屬性的修改和增加進行必要的干預(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
接下來再深入認識下它的另外兩個方法:set 以及get
注意:get和set不能與configurable,enumerable,value,writable同時存在
let obj = {x:10} let y = 100; Object.defineProperty(obj, 'y', { get() { //當obj的y屬性被調(diào)用的時候觸發(fā),該方法的返回值將作為獲取的結(jié)果 console.log('get'); return y; }, set(value) { //當obj的y屬性被設(shè)置的時候觸發(fā) console.log('set', value); y = value; } }) console.log(obj.y); obj.y = 1; console.log(obj.y);
介紹完defineProperty了,最后我們一起看看如何簡單的實現(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中數(shù)據(jù)雙向綁定的方法”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會,如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
標題名稱:vue中數(shù)據(jù)雙向綁定的方法
文章來源:http://bm7419.com/article4/pcgjie.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供云服務(wù)器、網(wǎng)頁設(shè)計公司、靜態(tài)網(wǎng)站、面包屑導(dǎo)航、網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)