vue.js使用defineProperty实现数据的双向绑定

vue.js如何实现数据的双向绑定？

不像棱角分明。

Vue利用了es5的明确特性。

1.一个小例子

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 ' title/title/head dyinput type=' text ' id=' demo ' p id=' display '/pscript var obj={ }；var bind=[]；//当obj对象的set和get方法被触发时，趁机输出或修改bind数组对象的内容。定义属性(obj，s '，{ set : function(val){ bind[' s ']=val；}，get:function(){返回绑定[' s ']；} })var demo=document . queryselector(' # demo ')；var display=document . query selector(' # display ')；//将# demo的值绑定到bind['s']，将#display的innerHTML也绑定到bind['s']。demo . onkeyup=function(){ obj[' s ']=demo . value；//触发了obj的set方法，将等于#demo的值赋给了bind['s']。display . innerHTMl=bind[' s ']；}/脚本/正文/html实现效果：

2.和睦相处

es5的语法似乎与IE9以下的浏览器不兼容。因此，vue只能兼容ie9以上的浏览器。

您可以使用兼容的es5: es5-shim库。

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！