- 資訊首頁(yè) > 開(kāi)發(fā)技術(shù) > web開(kāi)發(fā) > JavaScript >
- 利用js實(shí)現Vue2.0中數據的雙向綁定功能
語(yǔ)法：
Object.defineProperty(obj, prop, descriptor)
obj和prop很好理解 比如我們定義一個(gè)變量為
const o = {
name:'xbhog'
}
其中obj指的就是o,prop指的就是o.name 下面我們主要看看descriptor
descriptor 目標對象屬性的一些特征（是一個(gè)對象）
descriptor 下有6個(gè)參數
參數1：
value:屬性值
參數2：
writable：對象屬性值是否可以被修改 true允許 false不允許
參數3：
configurable:對象屬性是否可以被刪除 true允許 false不允許
參數4：
enumerable:對象屬性是否可被枚舉
參數5：
get():是個(gè)函數，當訪(fǎng)問(wèn)該屬性的時(shí)候，函數自動(dòng)調用，函數返回值就是該屬性的值
參數6：
set():是個(gè)函數，當修改該屬性的時(shí)候，函數自動(dòng)調用，函數有且只有一個(gè)參數，賦值的新值
注意：描述符里的value屬性 writable屬性 與 get屬性 set屬性是互斥的關(guān)系，只能存在一個(gè)
先看實(shí)現代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通過(guò)js實(shí)現數據的雙向綁定</title>
</head>
<body>
<input type="text"/><br>
<h1>你好：<span>更新數據</span></h1>
<!-- 通過(guò)js實(shí)現數據的雙向綁定 -->
<script>
// 方法返回文檔中與指定選擇器或選擇器組匹配的第一個(gè) HTMLElement對象
var ipt =document.querySelector('input');
var p = document.querySelector('span');
var data = {name:""};
/*
oninput 事件在用戶(hù)輸入時(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",{
// 數據訂閱
get(){
return ipt.value; //當訪(fǎng)問(wèn)的時(shí)候會(huì )調用get方法
},
// 數據劫持
//name:value
set(value) {
p.innerHTML = value;
ipt.value = value;
}
})
</script>
</body>
</html>
首先我們通過(guò)document.querySelector獲取input以及span標簽的Html對象，在定義一個(gè)data對象，屬性name先為空。
使用事件監聽(tīng)oninput來(lái)監聽(tīng)用戶(hù)輸入(該事件在 <input> 或 <textarea> 元素的值發(fā)生改變時(shí)觸發(fā))。
將ipt.value中的值傳給data.name的value；
data.name = ipt.value;
利用Object.defineProperty劫持用戶(hù)輸入的數據。
Object.defineProperty(data,"name",{
// 數據訂閱
get(){
return ipt.value; //當訪(fǎng)問(wèn)data.name時(shí)候會(huì )調用get方法，調用ipt.value獲取當前value的值
},
// 數據劫持
set(value) { //設置數據的時(shí)候會(huì )自動(dòng)調用set方法
p.innerHTML = value;
ipt.value = value;
}
看效果比較明顯：
set方法：
get方法：
最后實(shí)現效果：
參考資料：
到此這篇關(guān)于利用js實(shí)現Vue2.0中數據雙向綁定功能的文章就介紹到這了,更多相關(guān)js實(shí)現Vue2雙向綁定內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng )、來(lái)自本網(wǎng)站內容采集于網(wǎng)絡(luò )互聯(lián)網(wǎng)轉載等其它媒體和分享為主，內容觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如侵犯了原作者的版權，請告知一經(jīng)查實(shí)，將立刻刪除涉嫌侵權內容，聯(lián)系我們QQ:712375056，同時(shí)歡迎投稿傳遞力量。
Copyright ? 2009-2022 56dr.com. All Rights Reserved. 特網(wǎng)科技 特網(wǎng)云 版權所有 特網(wǎng)科技 粵ICP備16109289號
域名注冊服務(wù)機構:阿里云計算有限公司（萬(wàn)網(wǎng)） 域名服務(wù)機構：煙臺帝思普網(wǎng)絡(luò )科技有限公司（DNSPod） CDN服務(wù)：阿里云計算有限公司 百度云 中國互聯(lián)網(wǎng)舉報中心 增值電信業(yè)務(wù)經(jīng)營(yíng)許可證B2
建議您使用Chrome、Firefox、Edge、IE10及以上版本和360等主流瀏覽器瀏覽本網(wǎng)站
