這篇文章主要介紹了如何用js實現(xiàn)Vue2.0中數(shù)據(jù)的雙向綁定功能的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇如何用js實現(xiàn)Vue2.0中數(shù)據(jù)的雙向綁定功能文章都會有所收獲，下面我們一起來看看吧。

創(chuàng)新互聯(lián)長期為數(shù)千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為凌源企業(yè)提供專業(yè)的網(wǎng)站設(shè)計制作、做網(wǎng)站，凌源網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

Object.defineProperty了解

語法：

Object.defineProperty(obj, prop, descriptor)

• obj  要定義屬性的對象。

• prop 要定義或修改的屬性的名稱

• descriptor 要定義或修改的屬性描述符

obj和prop很好理解 比如我們定義一個變量為

const o = {
    name:"xbhog"
}

其中obj指的就是o,prop指的就是o.name 下面我們主要看看descriptor

descriptor  目標(biāo)對象屬性的一些特征（是一個對象）
   descriptor  下有6個參數(shù)
 參數(shù)1：
     value:屬性值
 參數(shù)2：
 　　writable：對象屬性值是否可以被修改  true允許  false不允許
 參數(shù)3：
 　　configurable:對象屬性是否可以被刪除 true允許  false不允許
 參數(shù)4：
 　　enumerable:對象屬性是否可被枚舉
 參數(shù)5：
     get():是個函數(shù)，當(dāng)訪問該屬性的時候，函數(shù)自動調(diào)用，函數(shù)返回值就是該屬性的值
 參數(shù)6：
     set():是個函數(shù)，當(dāng)修改該屬性的時候，函數(shù)自動調(diào)用，函數(shù)有且只有一個參數(shù)，賦值的新值

注意：描述符里的value屬性 writable屬性 與 get屬性 set屬性是互斥的關(guān)系，只能存在一個

了解了前置知識，我們來實現(xiàn)Vue中的v-model的雙向綁定

先看實現(xiàn)代碼：

    
    


    


你好：更新數(shù)據(jù)

首先我們通過document.querySelector獲取input以及span標(biāo)簽的Html對象，在定義一個data對象，屬性name先為空。

使用事件監(jiān)聽oninput來監(jiān)聽用戶輸入(該事件在 或 元素的值發(fā)生改變時觸發(fā))。</p><p>將ipt.value中的值傳給data.name的value；</p><pre>data.name = ipt.value;</pre><p>利用Object.defineProperty劫持用戶輸入的數(shù)據(jù)。</p><ul><li><p>get 屬性：是個函數(shù)，當(dāng)訪問該屬性的時候，函數(shù)自動調(diào)用，函數(shù)返回值就是該屬性的值</p></li><li><p>set 屬性：是個函數(shù)，當(dāng)修改該屬性的時候，函數(shù)自動調(diào)用，函數(shù)有且只有一個參數(shù)，賦值的新值</p></li></ul><pre>Object.defineProperty(data,"name",{     // 數(shù)據(jù)訂閱     get(){        return ipt.value;  //當(dāng)訪問data.name時候會調(diào)用get方法，調(diào)用ipt.value獲取當(dāng)前value的值     },     // 數(shù)據(jù)劫持     set(value) {   //設(shè)置數(shù)據(jù)的時候會自動調(diào)用set方法         p.innerHTML = value;         ipt.value = value;     }</pre><p><strong>看效果比較明顯：</strong></p><p>set方法：</p><p><img src="/upload/otherpic69/208611.png" alt="如何用js實現(xiàn)Vue2.0中數(shù)據(jù)的雙向綁定功能"></p><p>get方法：</p><p><img src="/upload/otherpic69/208612.png" alt="如何用js實現(xiàn)Vue2.0中數(shù)據(jù)的雙向綁定功能"></p><p>最后實現(xiàn)效果：</p><p><img src="/upload/otherpic69/208613.png" alt="如何用js實現(xiàn)Vue2.0中數(shù)據(jù)的雙向綁定功能"></p><p>關(guān)于“如何用js實現(xiàn)Vue2.0中數(shù)據(jù)的雙向綁定功能”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“如何用js實現(xiàn)Vue2.0中數(shù)據(jù)的雙向綁定功能”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。</p> <br> 名稱欄目：如何用js實現(xiàn)Vue2.0中數(shù)據(jù)的雙向綁定功能 <br> 本文地址：<a href="http://m.jiaotiyi.com/article/pdsjsc.html">http://m.jiaotiyi.com/article/pdsjsc.html</a> </div> </div> <div id="ocowiea" class="other"> <h3>其他資訊</h3> <ul> <li> <a href="/article/ddihhj.html">如何在iOS中定義和使用block-創(chuàng)新互聯(lián)</a> </li><li> <a href="/article/ddgoes.html">heatmap.js-創(chuàng)新互聯(lián)</a> </li><li> <a href="/article/ddgoec.html">規(guī)范模式-------FromABPDocument-創(chuàng)新互聯(lián)</a> </li><li> <a href="/article/ddihcp.html">JixiPix有什么用-創(chuàng)新互聯(lián)</a> </li><li> <a href="/article/ddgods.html">JS如何仿JQuery選擇器功能-創(chuàng)新互聯(lián)</a> </li> </ul> </div> </div> <footer> <div id="smcqwea" class="message"> <div id="o0a8qcq" class="mess container"> <p>免費獲取網(wǎng)站建設(shè)與品牌策劃方案報價</p> <span>*主要業(yè)務(wù)范圍包括：高端網(wǎng)站建設(shè)， 集團(tuán)網(wǎng)站建設(shè)(網(wǎng)站建設(shè)網(wǎng)站制作)找網(wǎng)站建設(shè)公司就上云錦誠科技。</span> <form action=""> <input type="text" class="ipt1" placeholder="聯(lián)系人"> <input type="text" class="ipt2" placeholder="聯(lián)系電話"> <textarea name="" id="" placeholder="內(nèi)容描述：描述您的需求，如網(wǎng)站、微信、電商、APP等。"> 提交需求