vue.js利用defineProperty实现数据的双向绑定
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。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持小牛知识库!
-
本文向大家介绍Nuxt.js 数据双向绑定的实现，包括了Nuxt.js 数据双向绑定的实现的使用技巧和注意事项，需要的朋友参考一下 假定我们有一个需求，一开始通过mounted()将一个字符串渲染在页面上，但是我们经过操作后修改了数据并且需要将得到的结果重新异步渲染到页面中去，而不是跳转刷新页面来重新渲染 首先模板中data()中定义数据，并且要将定义的数据显示出来 然后我们通过methods里的
-
本文向大家介绍Vue实现双向数据绑定，包括了Vue实现双向数据绑定的使用技巧和注意事项，需要的朋友参考一下 Vue实现双向数据绑定的方式，具体内容如下 Vue是如何实现双向数据绑定的呢？答案是前端数据劫持。其通过Object.defineProperty()方法，这个方法可以设置getter和setter函数，在setter函数中，就可以监听到数据的变化，从而更新绑定的元素的值。 实现对象属性变化
-
本文向大家介绍vue.js使用v-model指令实现的数据双向绑定功能示例，包括了vue.js使用v-model指令实现的数据双向绑定功能示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了vue.js使用v-model指令实现的数据双向绑定功能。分享给大家供大家参考，具体如下： vue.js的一大功能便是实现数据的双向绑定，本文就表单处理时运用v-model指令实现双向绑定做一个介绍：
-
本文向大家介绍实现非常简单的js双向数据绑定，包括了实现非常简单的js双向数据绑定的使用技巧和注意事项，需要的朋友参考一下 双向数据绑定指的就是，绑定对象属性的改变到用户界面的变化的能力，反之亦然。换种说法，如果我们有一个user对象和一个name属性，一旦我们赋了一个新值给user.name,在UI上就会显示新的姓名了。同样地，如果UI包含了一个输入用户姓名的输入框，输入一个新值就应该会使use
-
本文向大家介绍vue实现的双向数据绑定操作示例，包括了vue实现的双向数据绑定操作示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了vue实现的双向数据绑定操作。分享给大家供大家参考，具体如下： 使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试，可得到如下运行效果 感兴趣的朋友可以测试一下看看运行效果
-
本文向大家介绍JS原生数据双向绑定实现代码，包括了JS原生数据双向绑定实现代码的使用技巧和注意事项，需要的朋友参考一下 代码如下： 效果示例： 总结 以上所述是小编给大家介绍的JS原生数据双向绑定实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持！
-
1. 前言 本小节我们将介绍 Vue 中数据的双向绑定指令 v-model。v-model 的学习相对简单 我们可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 2. 慕课解释 用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选
-
本文向大家介绍浅谈vue中数据双向绑定的实现原理，包括了浅谈vue中数据双向绑定的实现原理的使用技巧和注意事项，需要的朋友参考一下 vue中最常见的属v-model这个数据双向绑定了，很好奇它是如何实现的呢？尝试着用原生的JS去实现一下。 首先大致学习了解下Object.defineProperty()这个东东吧！ 以上总结了对象的defineProperty四个属性：configurable，e