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。

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

相关文章

  • vuex入门教程,图文+实例解析

    vuex入门教程,图文+实例解析

    这篇文章主要介绍了vuex入门教程,图文+实例解析,具有很好的参考价值,希望对大家有所帮助。
    2022-03-03
  • Vue 第三方字体图标引入 Font Awesome的方法

    Vue 第三方字体图标引入 Font Awesome的方法

    今天小编就为大家分享一篇Vue 第三方字体图标引入 Font Awesome的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 详解Vue.js 2.0 如何使用axios

    详解Vue.js 2.0 如何使用axios

    本篇文章主要介绍了Vue.js 2.0 如何使用axios,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • vue修改swiper框架轮播图小圆点的样式不起作用的解决

    vue修改swiper框架轮播图小圆点的样式不起作用的解决

    这篇文章主要介绍了vue修改swiper框架轮播图小圆点的样式不起作用的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue实现简单计算商品价格

    vue实现简单计算商品价格

    这篇文章主要为大家详细介绍了vue实现简单计算商品价格,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • Sublime Text新建.vue模板并高亮(图文教程)

    Sublime Text新建.vue模板并高亮(图文教程)

    这篇文章主要介绍了Sublime Text新建.vue模板并高亮(图文教程),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • vue3中引入svg矢量图的实现示例

    vue3中引入svg矢量图的实现示例

    在项目开发过程中,我们经常会用到svg矢量图,本文主要介绍了vue3中引入svg矢量图的实现示例,具有一定的参考价值,感兴趣的可以了解一下
    2023-11-11
  • vue 虚拟dom的patch源码分析

    vue 虚拟dom的patch源码分析

    这篇文章主要介绍了vue 虚拟dom的patch源码分析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • vue 2 实现自定义组件一到多个v-model双向数据绑定的方法(最新推荐)

    vue 2 实现自定义组件一到多个v-model双向数据绑定的方法(最新推荐)

    有时候我们需要对一个组件绑定自定义 v-model,以更方便地实现双向数据,例如自定义表单输入控件,这篇文章主要介绍了vue 2 实现自定义组件一到多个v-model双向数据绑定的方法,需要的朋友可以参考下
    2024-07-07
  • 详解Vue demo实现商品列表的展示

    详解Vue demo实现商品列表的展示

    这篇文章主要介绍了Vue demo实现商品列表的展示,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05

最新评论