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 相关文章推荐
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
Oct 17 Javascript
一些javascript一些题目的解析
Dec 25 Javascript
JS判断数组中是否有重复值得三种实用方法
Aug 16 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
Oct 10 Javascript
jQuery的css() 方法使用指南
May 03 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
jQuery元素选择器实例代码
Feb 06 Javascript
微信小程序 navbar实例详解
May 11 Javascript
在JS循环中使用async/await的方法
Oct 12 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 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
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
基于PHP实现简单的随机抽奖小程序
2016/01/05 PHP
PHP内置加密函数详解
2016/11/20 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
JS判断是否360安全浏览器极速内核的方法
2015/01/29 Javascript
jQuery读取XML文件内容的方法
2015/03/09 Javascript
js改变Iframe中Src的方法
2015/05/05 Javascript
九种原生js动画效果
2015/11/11 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
JS实现探测网站链接的方法【测试可用】
2016/11/08 Javascript
JavaScript中localStorage对象存储方式实例分析
2017/01/12 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
了解JavaScript中的选择器
2019/05/24 Javascript
Vue实现导航栏点击当前标签变色功能
2020/08/19 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
layui异步加载table表中某一列数据的例子
2019/09/16 Javascript
Python isinstance判断对象类型
2008/09/06 Python
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
详解Python核心对象类型字符串
2018/02/11 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
Matlab使用Plot函数实现数据动态显示方法总结
2021/02/25 Python
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
IGK Hair官网:喷雾、洗发水、护发素等
2020/11/03 全球购物
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
揭牌仪式主持词
2014/03/19 职场文书
我的中国梦演讲稿初中篇
2014/08/19 职场文书
作风整顿剖析材料
2014/09/30 职场文书
催款律师函范文
2015/05/27 职场文书
mysql死锁和分库分表问题详解
2021/04/16 MySQL
MySQL生成千万测试数据以及遇到的问题
2022/08/05 MySQL