溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“Vue中數據的雙向綁定功能怎么實現”，內容詳細，步驟清晰，細節處理妥當，希望這篇“Vue中數據的雙向綁定功能怎么實現”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
語法：
Object.defineProperty(obj, prop, descriptor)
obj 要定義屬性的對象。
prop 要定義或修改的屬性的名稱
descriptor 要定義或修改的屬性描述符
obj和prop很好理解 比如我們定義一個變量為
const o = {
name:"xbhog"
}其中obj指的就是o,prop指的就是o.name 下面我們主要看看descriptor
descriptor 目標對象屬性的一些特征（是一個對象）
descriptor 下有6個參數
參數1：
value:屬性值
參數2：
writable：對象屬性值是否可以被修改 true允許 false不允許
參數3：
configurable:對象屬性是否可以被刪除 true允許 false不允許
參數4：
enumerable:對象屬性是否可被枚舉
參數5：
get():是個函數，當訪問該屬性的時候，函數自動調用，函數返回值就是該屬性的值
參數6：
set():是個函數，當修改該屬性的時候，函數自動調用，函數有且只有一個參數，賦值的新值
注意：描述符里的value屬性 writable屬性 與 get屬性 set屬性是互斥的關系，只能存在一個
先看實現代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通過js實現數據的雙向綁定</title>
</head>
<body>
<input type="text"/><br>
<h1>你好：<span>更新數據</span></h1>
<!-- 通過js實現數據的雙向綁定 -->
<script>
// 方法返回文檔中與指定選擇器或選擇器組匹配的第一個 HTMLElement對象
var ipt =document.querySelector("input");
var p = document.querySelector("span");
var data = {name:""};
/*
oninput 事件在用戶輸入時觸發。
該事件在 <input> 或 <textarea> 元素的值發生改變時觸發。
*/
ipt.oninput = function(){
// 將ipt.value中的值傳給data.name的value
data.name = ipt.value;
}
//劫持ipt.value
Object.defineProperty(data,"name",{
// 數據訂閱
get(){
return ipt.value; //當訪問的時候會調用get方法
},
// 數據劫持
//name:value
set(value) {
p.innerHTML = value;
ipt.value = value;
}
})
</script>
</body>
</html>首先我們通過document.querySelector獲取input以及span標簽的Html對象，在定義一個data對象，屬性name先為空。
使用事件監聽oninput來監聽用戶輸入(該事件在 <input> 或 <textarea> 元素的值發生改變時觸發)。
將ipt.value中的值傳給data.name的value；
data.name = ipt.value;
利用Object.defineProperty劫持用戶輸入的數據。
get 屬性：是個函數，當訪問該屬性的時候，函數自動調用，函數返回值就是該屬性的值
set 屬性：是個函數，當修改該屬性的時候，函數自動調用，函數有且只有一個參數，賦值的新值
Object.defineProperty(data,"name",{
// 數據訂閱
get(){
return ipt.value; //當訪問data.name時候會調用get方法，調用ipt.value獲取當前value的值
},
// 數據劫持
set(value) { //設置數據的時候會自動調用set方法
p.innerHTML = value;
ipt.value = value;
}看效果比較明顯：
set方法：
get方法：
最后實現效果：
讀到這里，這篇“Vue中數據的雙向綁定功能怎么實現”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
