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 相关文章推荐
jquery ready函数源代码研究
Dec 06 Javascript
js利用数组length属性清空和截短数组的小例子
Jan 15 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
php常见的页面跳转方法汇总
Apr 15 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
Sep 05 Javascript
基于Vue渲染与插件的加载顺序的问题详解
Mar 05 Javascript
微信小程序使用wxParse解析html的实现示例
Aug 30 Javascript
改变layer confirm弹窗按钮的颜色方法
Sep 12 Javascript
JavaScript实现贪吃蛇游戏
Jun 16 Javascript
JavaScript高级程序设计之变量与作用域
Nov 17 Javascript
html5调用摄像头截图功能
Jan 18 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
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
PHP7使用ODBC连接SQL Server2008 R2数据库示例【基于thinkPHP5.1框架】
2019/05/06 PHP
JS生成不重复随机数组的函数代码
2014/06/10 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
React 实现拖拽功能的示例代码
2019/01/06 Javascript
React优化子组件render的使用
2019/05/12 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
JS实现纸牌发牌动画
2021/01/19 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
Python文件处理
2016/02/29 Python
浅谈python 线程池threadpool之实现
2017/11/17 Python
python生成器,可迭代对象,迭代器区别和联系
2018/02/04 Python
获取python的list中含有重复值的index方法
2018/06/27 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
python实现字符串加密成纯数字
2019/03/19 Python
Python单元和文档测试实例详解
2019/04/11 Python
python urllib爬虫模块使用解析
2019/09/05 Python
关于Python-faker的函数效果一览
2019/11/28 Python
html Table 表头固定的实现
2019/01/22 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
品学兼优的大学生自我评价
2013/09/20 职场文书
自荐书模板
2013/12/19 职场文书
学校安全生产承诺书
2014/05/23 职场文书
三严三实对照检查材料
2014/08/25 职场文书
三方股份合作协议书
2014/10/13 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
开幕式邀请函
2015/01/31 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书