vue 属性拦截实现双向绑定的实例代码


Posted in Javascript onOctober 24, 2018

下面通过代码给大家介绍vue 属性拦截实现双向绑定,具体代码如下所示:

let obj = {}
let get = ''
Object.defineProperty(obj, 'get', {
 set: function(val) {
 document.getElementById('input').value = val
 document.getElementById('text').innerHTML = val
 }
})
document.getElementById('input').addEventListener('keyup', function(e) {
 obj.get = e.target.value
})
obj.get = 'hello'

PS:下面看下vue中属性绑定和双向绑定的实例代码

一、属性绑定

<div id="root">
    <div v-bind:title=" 'dear jin,' + title">hello world</div>
  </div>
  <script>
    new Vue({
      el: "#root",
      data: {
        title: 'this is hello world'
      },
      methods: {
      }
    })
  </script>

通过 v-bind:title = " " 实现title绑定,等号 后面" " 里面可用js的表达式。

v-bind:title 可缩写成 :title。

二、双向绑定

<div id="root">
    <input type="text" v-model="content" />
    <div>{{content}}</div>
  </div>
  <script>
    new Vue({
      el: "#root",
      data: {
        content: "this is content"
      },
      methods: {

      }
    })
  </script>

v-model 为vue模板数据双向绑定指令。

总结

以上所述是小编给大家介绍的vue 属性拦截实现双向绑定的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
JS选取DOM元素的简单方法
Jul 08 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
在vue中给列表中的奇数行添加class的实现方法
Sep 05 Javascript
详解ES6系列之私有变量的实现
Nov 21 Javascript
使用原生js编写一个简单的框选功能方法
May 13 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 Javascript
JavaScript进阶(三)闭包原理与用法详解
May 09 Javascript
vue中的循环对象属性和属性值用法
Sep 04 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 Javascript
深入理解JavaScript的值传递和引用传递
Oct 24 #Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 #Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
Oct 24 #Javascript
JavaScript根据json生成html表格的示例代码
Oct 24 #Javascript
vue项目引入Iconfont图标库的教程图解
Oct 24 #Javascript
vue中的router-view组件的使用教程
Oct 23 #Javascript
jQuery pagination分页示例详解
Oct 23 #jQuery
You might like
php设计模式 Decorator(装饰模式)
2011/06/26 PHP
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
PHP中数组合并的两种方法及区别介绍
2012/09/14 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
safari下载文件自动加了html后缀问题
2018/11/09 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
2019/03/01 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
javascript实现微信分享
2014/12/23 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
python正则表达式之作业计算器
2016/03/18 Python
python 简单的绘图工具turtle使用详解
2017/06/21 Python
Python二叉树定义与遍历方法实例分析
2018/05/25 Python
Python列表切片操作实例总结
2019/02/19 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
使用matlab 判断两个矩阵是否相等的实例
2020/05/11 Python
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
eHarmony英国:全球领先的认真恋爱约会平台之一
2020/11/16 全球购物
武汉某公司的C#笔试题面试题
2015/12/25 面试题
海量信息软件测试笔试题
2015/08/08 面试题
超市营业员岗位职责
2013/12/20 职场文书
旷课检讨书2000字
2014/01/14 职场文书
平面设计求职信
2014/03/10 职场文书
工作会议主持词
2014/03/17 职场文书
外国人聘用意向书
2014/04/01 职场文书
中国入世承诺
2014/04/01 职场文书
新闻传播专业求职信
2014/07/22 职场文书
个人债务授权委托书范本
2014/10/05 职场文书
2014年城管工作总结
2014/11/20 职场文书