雙向數據綁定面試一般都會問到，首先要了解訪問器屬性用法，時間關系，先貼代碼，有時間了分析一下 ，希望本文能幫助到大家。
Object.defineProperty(obj,propertyName,{ get:function(){
//讀取obj對象的propertyName屬性時執行
}, set:function(currvalue){
//修改obj對象的propertyName屬性時執行
},
});<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>js實現vue雙向數據綁定 利用訪問器屬性</title></head><body>
<input bind-value="value" type="text" placeholder="請輸入..." id="user-input">
<p bind-text="value" id="show-input"></p>
<script>
var elems=[document.getElementById('user-input'),document.getElementById('show-input')]; var data={
initValue:'',
}; function define(obj,propertyName) {
Object.defineProperty(obj,propertyName,{
get:function(){
return this.initValue;
},
set:function(currvalue){
this.initValue=currvalue; //同步p
scan();
},
});
}
define(data,'value');
data.value='';
scan(); //監聽事件
elems[0].addEventListener('keyup',function(e){
var e=e||window.event;
data.value=e.target.value;
}); function scan(){
for(var i=0;i<elems.length;i++){ var ele=elems[i]; for(var j=0;j<ele.attributes.length;j++){ var attr=ele.attributes[j]; if(attr.nodeName.indexOf('bind')>=0){
elems[1].innerHTML=data.value;
elems[0].setAttribute('current-values',data.value);
}
}
}
} </script></body></html>相關推薦：
Vue雙向數據綁定源碼分析
js實現雙向數據綁定的方法
前端之js雙向數據綁定
以上就是js代碼實現vue雙向數據綁定實例的詳細內容，更多請關注php中文網其它相關文章！