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 相关文章推荐
js函数的延迟加载实现代码
Oct 11 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
JavaScript数组常用方法
Mar 02 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
Nov 06 Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 Javascript
vue中element 上传功能的实现思路
Jul 06 Javascript
vue里面使用mui的弹出日期选择插件实例
Sep 16 Javascript
Puppet的一些技巧
Sep 17 Javascript
Fetch超时设置与终止请求详解
May 18 Javascript
小试小程序云开发(小结)
Jun 06 Javascript
微信小程序左滑删除实现代码实例
Sep 16 Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
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导入导出Excel代码
2015/07/07 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
PHP和C#可共用的可逆加密算法详解
2015/10/26 PHP
php中namespace use用法实例分析
2016/01/22 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
麦鸡的TAB切换功能结合了javascript和css
2007/12/17 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
JavaScript纯色二维码变成彩色二维码
2020/07/23 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
JavaScript在web自动化测试中的作用示例详解
2019/08/25 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
2019/09/11 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
Python实现的个人所得税计算器示例
2018/06/01 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
Python 切分数组实例解析
2019/11/07 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
简单了解python列表和元组的区别
2020/05/14 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
canvas实现滑动验证的实现示例
2020/08/11 HTML / CSS
函授大学生自我鉴定
2014/02/05 职场文书
公益活动邀请函
2014/02/05 职场文书
保险公司晨会主持词
2014/03/22 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
教师节领导致辞
2015/07/29 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS
Python爬虫进阶之Beautiful Soup库详解
2021/04/29 Python
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
2021/08/07 HTML / CSS
A22国内电台短波广播频率表
2022/05/10 无线电