vue.js如何實現數據的雙向綁定呢？
與angular不同。
vue利用的是es5的defineproperty特性。
1.一個小例子
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><input type="text" id="demo"><p id="display"></p><script> var obj={}; var bind=[]; //觸發obj對象set和get方法的時候，趁機來輸出或修改bind數組的內容 Object.defineProperty(obj,'s',{ set:function(val){ bind['s']=val; }, get:function(){ return bind['s']; } }) var demo=document.querySelector('#demo'); var display=document.querySelector('#display'); //#demo的value值與bind['s']綁定，#display的innerHTML也與bind['s']綁定。 demo.onkeyup=function(){ obj['s']=demo.value;//觸發了obj的set方法，等于#demo的value值賦值給bind['s']。 display.innerHTML=bind['s']; }</script></body></html>實現效果：
2.兼容性
貌似es5的語法在IE9以下的瀏覽器不能兼容。所以vue只能兼容ie9以上的瀏覽器了。
可以使用es5的兼容庫：es5-shim。
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網!
新聞熱點
疑難解答
