溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Vue中數(shù)據(jù)的雙向綁定功能怎么實(shí)現(xiàn)

發(fā)布時(shí)間：2022-10-13 11:48:39 來(lái)源：億速云 閱讀：126 作者：iii 欄目：開(kāi)發(fā)技術(shù)

本文小編為大家詳細(xì)介紹“Vue中數(shù)據(jù)的雙向綁定功能怎么實(shí)現(xiàn)”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Vue中數(shù)據(jù)的雙向綁定功能怎么實(shí)現(xiàn)”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

Object.defineProperty了解

語(yǔ)法：

Object.defineProperty(obj, prop, descriptor)

  • obj  要定義屬性的對(duì)象。

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

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

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

const o = {
    name:"xbhog"
}

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

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

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

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

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

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


<!-- 通過(guò)js實(shí)現(xiàn)數(shù)據(jù)的雙向綁定 -->
<script>
 // 方法返回文檔中與指定選擇器或選擇器組匹配的第一個(gè) HTMLElement對(duì)象
    var ipt =document.querySelector("input");
    var p = document.querySelector("span");
 
 
    var data = {name:""};
 /* 
     oninput 事件在用戶輸入時(shí)觸發(fā)。
     該事件在 <input> 或 <textarea> 元素的值發(fā)生改變時(shí)觸發(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)訪問(wèn)的時(shí)候會(huì)調(diào)用get方法
    },
    // 數(shù)據(jù)劫持
 //name:value
    set(value) {
        p.innerHTML = value;
        ipt.value = value;
    }   
})
</script>
</body>
</html>

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

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

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

data.name = ipt.value;

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

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

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

Object.defineProperty(data,"name",{
    // 數(shù)據(jù)訂閱
    get(){
       return ipt.value;  //當(dāng)訪問(wèn)data.name時(shí)候會(huì)調(diào)用get方法，調(diào)用ipt.value獲取當(dāng)前value的值
    },
    // 數(shù)據(jù)劫持
    set(value) {   //設(shè)置數(shù)據(jù)的時(shí)候會(huì)自動(dòng)調(diào)用set方法
        p.innerHTML = value;
        ipt.value = value;
    }

看效果比較明顯：

set方法：

Vue中數(shù)據(jù)的雙向綁定功能怎么實(shí)現(xiàn)

get方法：

Vue中數(shù)據(jù)的雙向綁定功能怎么實(shí)現(xiàn)

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

Vue中數(shù)據(jù)的雙向綁定功能怎么實(shí)現(xiàn)

讀到這里，這篇“Vue中數(shù)據(jù)的雙向綁定功能怎么實(shí)現(xiàn)”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

vue
AI
助
手