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


Posted in Javascript onApril 28, 2017

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>

实现效果:

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

2.兼容性

貌似es5的语法在IE9以下的浏览器不能兼容。所以vue只能兼容ie9以上的浏览器了。

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript高亮效果的二种实现方法
Sep 14 Javascript
JQuery 常用方法和事件详细介绍
Apr 18 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
Mar 26 Javascript
jQuery插件实现多级联动菜单效果
Dec 01 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
bootstrap flask登录页面编写实例
Nov 01 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
微信小程序 登陆流程详细介绍
Jan 17 Javascript
ES6基础之展开语法(Spread syntax)
Feb 21 Javascript
微信小程序仿通讯录功能
Apr 09 Javascript
es6函数之尾递归用法实例分析
Apr 25 Javascript
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 #jQuery
Javascript实现数组中的元素上下移动
Apr 28 #Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 #jQuery
JS简单判断滚动条的滚动方向实现方法
Apr 28 #Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
Apr 28 #Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 #Javascript
jquery实现图片上传前本地预览
Apr 28 #jQuery
You might like
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
PHP实现二维数组按照指定的字段进行排序算法示例
2019/04/23 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
前端自动化开发之Node.js的环境搭建教程
2017/04/01 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
Three.js中网格对象MESH的属性与方法详解
2017/09/27 Javascript
微信小程序 JS动态修改样式的实现方法
2018/12/16 Javascript
vue webpack重写cookie路径的方法
2019/07/10 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
Python 正则表达式(转义问题)
2014/12/15 Python
Saltstack快速入门简单汇总
2016/03/01 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
200行python代码实现2048游戏
2019/07/17 Python
详解Python 字符串相似性的几种度量方法
2019/08/29 Python
python利用openpyxl拆分多个工作表的工作簿的方法
2019/09/27 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
VLAN和VPN有什么区别?分别实现在OSI的第几层?
2014/12/23 面试题
舞蹈教育学专业推荐信
2013/11/27 职场文书
秋季婚礼证婚词
2014/01/11 职场文书
基督教婚礼主持词
2014/03/14 职场文书
合作协议书怎么写
2014/04/18 职场文书
小学语文课后反思精选
2014/04/25 职场文书
高中军训的心得体会
2014/09/01 职场文书
学生会辞职信
2015/03/02 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书
送给自己的励志语句:要安静的优秀,悄无声息的坚强
2019/11/26 职场文书
mysql sock文件存储了什么信息
2022/07/15 MySQL