vue.js如何使用defineProperty實(shí)現(xiàn)數(shù)據(jù)的雙向綁定

發(fā)布時(shí)間：2021-07-01 14:51:45 來(lái)源：億速云閱讀：105 作者：小新欄目：web開(kāi)發(fā)

這篇文章主要介紹了vue.js如何使用defineProperty實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

vue.js如何實(shí)現(xiàn)數(shù)據(jù)的雙向綁定呢？

與angular不同。

vue利用的是es5的defineproperty特性。

1.一個(gè)小例子

<!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=[];
  //觸發(fā)obj對(duì)象set和get方法的時(shí)候，趁機(jī)來(lái)輸出或修改bind數(shù)組的內(nèi)容
  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;//觸發(fā)了obj的set方法，等于#demo的value值賦值給bind['s']。
    display.innerHTML=bind['s'];
  }
</script>
</body>
</html>

實(shí)現(xiàn)效果：

vue.js如何使用defineProperty實(shí)現(xiàn)數(shù)據(jù)的雙向綁定

2.兼容性

貌似es5的語(yǔ)法在IE9以下的瀏覽器不能兼容。所以vue只能兼容ie9以上的瀏覽器了。

可以使用es5的兼容庫(kù)：es5-shim。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue.js如何使用defineProperty實(shí)現(xiàn)數(shù)據(jù)的雙向綁定”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

vue.js如何使用defineProperty實(shí)現(xiàn)數(shù)據(jù)的雙向綁定

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽