vue.js利用defineProperty实现数据的双向绑定
更新时间：2017年04月28日 16:55:30 作者：小章鱼哥
本篇文章主要介绍了用Node.js当作后台、jQuery写前台AJAX代码实现用户登录和注册的功能的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
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。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家!
相关文章
解决antd的Form组件setFieldsValue的警告问题
这篇文章主要介绍了解决antd的Form组件setFieldsValue的警告问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
vue中$emit传递多个参(arguments和$event)
本文主要介绍了vue中$emit传递多个参(arguments和$event)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
今天小编就为大家分享一篇vue 解决form表单提交但不跳转页面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
vue eslint报错error "Component name "*****"
这篇文章主要给大家介绍了关于vue eslint报错error “Component name “*****“ should always be multi-word”的解决方法,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
Vuex是Vue.js的官方状态管理模式，它为Vue.js应用程序提供了一个集中式的状态管理解决方案，Vuex可以帮助我们管理应用程序中所有组件的状态，使得状态管理变得更加简单和可靠，需要详细了解可以参考下文2023-05-05
vue中axios处理http发送请求的示例（Post和get）
本篇文章主要介绍了vue中axios处理http请求的示例（Post和get），这里整理了详细的代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
这篇文章主要介绍了vue3+vite动态引入图片方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
在Vue中通过Mustache语法（双大括号）将data中的文本数据插入到HTML中,下面这篇文章主要给大家介绍了关于Vue中Mustache插值语法与v-bind指令的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了vue关于页面刷新的几个方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了django简单的前后端分离的数据传输实例 axios，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-05-05
最新评论