js實現數據的雙向綁定
阿新 • • 發佈:2019-01-25
prope 修改 描述 pre tlist bsp col set new
今天用原生js來實現一個數據的雙向綁定
知識點:object.defineProperty()
三個參數:
第一個:要定義屬性的對象,
第二個:要定義或者修改的屬性的名稱
第三個:將被定義或者修改的屬性的描述
<input type="text" id="inp"/>
<p id="showText"></p>
<script>
var obj = {};
Object.defineProperty(obj,"newProp",{
get:function(){
return obj;
},
set:function(newVal){
document.getElementById("inp").value = newVal;
document.getElementById("showText").innerHTML = newVal;
}
})
document.addEventListener("keyup",function(e){
obj.newProp = e.target.value;
})
</script>
js實現數據的雙向綁定