溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“如何利用js實現Vue2.0中數據的雙向綁定功能”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“如何利用js實現Vue2.0中數據的雙向綁定功能”吧!
語法：
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 lang="en">
<head>
<meta charset="UTF-8">
<title>通過js實現數據的雙向綁定</title>
</head>
<body>
<input type="text"/><br>
<h2>你好：<span>更新數據</span></h2>
<!-- 通過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方法：
最后實現效果：
參考資料：
https://blog.csdn.net/Doulvme/article/details/107978012
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
https://www.jianshu.com/p/6f589af16ad4
//www.mlszssj.com/article/217657.htm (推薦)
到此，相信大家對“如何利用js實現Vue2.0中數據的雙向綁定功能”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
