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 相关文章推荐
用jquery.sortElements实现table排序
May 04 Javascript
JS+CSS实现Li列表隔行换色效果的方法
Feb 16 Javascript
在HTML中插入JavaScript代码的示例
Jun 03 Javascript
jQuery实现提示密码强度的代码
Jul 15 Javascript
AngularJS 使用 UI Router 实现表单向导
Jan 29 Javascript
jQuery实现Select左右复制移动内容
Aug 05 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
基于layui数据表格以及传数据的方式
Aug 19 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
Apr 09 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
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
PHP 防注入函数(格式化数据)
2011/08/08 PHP
简单谈谈php中ob_flush和flush的区别
2014/11/27 PHP
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
javascript Math.random()随机数函数
2009/11/04 Javascript
Javascript中自动切换焦点实现代码
2012/12/15 Javascript
js传参数受特殊字符影响错误的解决方法
2013/10/21 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
2015/09/01 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
2015/11/15 Javascript
AngularJS基础 ng-include 指令简单示例
2016/08/01 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
2017/03/22 jQuery
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
jQuery事件_动力节点Java学院整理
2017/07/05 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
2018/02/13 jQuery
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
express.js中间件说明详解
2019/03/19 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
Python3之文件读写操作的实例讲解
2018/01/23 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
python打包exe开机自动启动的实例(windows)
2019/06/28 Python
python requests使用socks5的例子
2019/07/25 Python
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
会议开幕词
2015/01/28 职场文书
2015年清明节演讲稿范文
2015/03/17 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技