99偷拍视频精品区一区二,口述久久久久久久久久久久,国产精品夫妇激情啪发布,成人永久免费网站在线观看,国产精品高清免费在线,青青草在线观看视频观看,久久久久久国产一区,天天婷婷久久18禁,日韩动漫av在线播放直播

如何用js實現(xiàn)Vue2.0中數(shù)據(jù)的雙向綁定功能

這篇文章主要介紹了如何用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)代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>通過js實現(xiàn)數(shù)據(jù)的雙向綁定</title>
</head>
<body>
    
<input type="text"/><br>
<h1>你好：<span>更新數(shù)據(jù)</span></h1>


<!-- 通過js實現(xiàn)數(shù)據(jù)的雙向綁定 -->
<script>
 // 方法返回文檔中與指定選擇器或選擇器組匹配的第一個 HTMLElement對象
    var ipt =document.querySelector("input");
    var p = document.querySelector("span");
 
 
    var data = {name:""};
 /* 
     oninput 事件在用戶輸入時觸發(fā)。
     該事件在 <input> 或 <textarea> 元素的值發(fā)生改變時觸發(fā)。
  */
    ipt.oninput = function(){
 // 將ipt.value中的值傳給data.name的value
        data.name = ipt.value;
    }
    //劫持ipt.value
    Object.defineProperty(data,"name",{
    // 數(shù)據(jù)訂閱
    get(){
        return ipt.value;  //當(dāng)訪問的時候會調(diào)用get方法
    },
    // 數(shù)據(jù)劫持
 //name:value
    set(value) {
        p.innerHTML = value;
        ipt.value = value;
    }   
})
</script>
</body>
</html>

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

使用事件監(jiān)聽oninput來監(jiān)聽用戶輸入(該事件在 <input> 或 <textarea> 元素的值發(fā)生改變時觸發(fā))。

將ipt.value中的值傳給data.name的value；

data.name = ipt.value;

利用Object.defineProperty劫持用戶輸入的數(shù)據(jù)。

  • get 屬性：是個函數(shù)，當(dāng)訪問該屬性的時候，函數(shù)自動調(diào)用，函數(shù)返回值就是該屬性的值

  • set 屬性：是個函數(shù)，當(dāng)修改該屬性的時候，函數(shù)自動調(diào)用，函數(shù)有且只有一個參數(shù)，賦值的新值

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;
    }

看效果比較明顯：

set方法：

如何用js實現(xiàn)Vue2.0中數(shù)據(jù)的雙向綁定功能

get方法：

如何用js實現(xiàn)Vue2.0中數(shù)據(jù)的雙向綁定功能

最后實現(xiàn)效果：

如何用js實現(xiàn)Vue2.0中數(shù)據(jù)的雙向綁定功能

關(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è)資訊頻道。

本文名稱：如何用js實現(xiàn)Vue2.0中數(shù)據(jù)的雙向綁定功能
當(dāng)前路徑：http://www.yijiale78.com/article32/pdsjsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、網(wǎng)站維護(hù)、ChatGPT、品牌網(wǎng)站設(shè)計、網(wǎng)站排名、微信小程序

廣告

聲明：本網(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)

小程序開發(fā)