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高级程序设计
Dec 29 Javascript
ejs v9 javascript模板系统
Mar 21 Javascript
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
event.currentTarget与event.target的区别介绍
Dec 31 Javascript
基于jQuery.Validate验证库知识点的详解
Apr 26 Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 Javascript
小程序指纹验证的实现代码
Dec 04 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
Mar 12 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
星际玩家的三大定律
2020/03/04 星际争霸
mysql5详细安装教程
2007/01/15 PHP
PHP fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
PHP调用MsSQL Server 2012存储过程获取多结果集(包含output参数)的详解
2013/07/03 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
2011/04/27 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
Javascript基础教程之变量
2015/01/18 Javascript
JavaScript插件化开发教程 (三)
2015/01/27 Javascript
浅谈JavaScript数据类型
2015/03/03 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
微信小程序模板之分页滑动栏
2017/02/10 Javascript
详解ES6通过WeakMap解决内存泄漏问题
2018/03/09 Javascript
React 实现拖拽功能的示例代码
2019/01/06 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
Python输出9*9乘法表的方法
2015/05/25 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
django表单的Widgets使用详解
2019/07/22 Python
python+selenium 鼠标事件操作方法
2019/08/24 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
python 无损批量压缩图片(支持保留图片信息)的示例
2020/09/22 Python
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
港湾网络笔试题
2014/04/19 面试题
岗位职责说明书
2014/05/07 职场文书
检察院起诉意见书
2015/05/20 职场文书
2015国庆节宣传语
2015/07/14 职场文书
宿舍管理制度范本
2015/08/07 职场文书
《比的意义》教学反思
2016/02/18 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js