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 相关文章推荐
简约JS日历控件 实例代码
Jul 12 Javascript
checkbox设置复选框的只读效果不让用户勾选
Aug 12 Javascript
jquery实现的一个文章自定义分段显示功能
May 23 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
Bootstrap学习笔记之css样式设计(2)
Jun 07 Javascript
原生js实现电商侧边导航效果
Jan 19 Javascript
Angular+Node生成随机数的方法
Jun 16 Javascript
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
Electron中实现大文件上传和断点续传功能
Oct 28 Javascript
详解JavaScript栈内存与堆内存
Apr 04 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
Vue列表循环从指定下标开始的多种解决方案
Apr 08 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 has encountered a Stack overflow问题解决方法
2014/11/03 PHP
PHP实现支持SSL连接的SMTP邮件发送类
2015/03/05 PHP
php实现粘贴截图并完成上传功能
2015/05/17 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
PHP数组实例详解
2016/06/26 PHP
php基于SQLite实现的分页功能示例
2017/06/21 PHP
PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】
2017/08/11 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
js实现网站首页图片滚动显示
2013/02/04 Javascript
js实现的彩色方块飞舞奇幻效果
2016/01/27 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
深入理解Python中命名空间的查找规则LEGB
2015/08/06 Python
TensorFlow神经网络优化策略学习
2018/03/09 Python
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
简单了解python gevent 协程使用及作用
2019/07/22 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
Python3 requests模块如何模仿浏览器及代理
2020/06/15 Python
python实现简单的学生管理系统
2021/02/22 Python
Html5自定义字体解决方法
2019/10/09 HTML / CSS
销售冠军获奖感言
2014/02/03 职场文书
合作协议书范本
2014/04/17 职场文书
品牌服务方案
2014/06/03 职场文书
建筑横幅标语
2014/10/09 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
城镇居民医疗保险工作总结
2015/08/10 职场文书
Python装饰器的练习题
2021/11/23 Python
利用Python将list列表写入文件并读取的方法汇总
2022/03/25 Python
python Tkinter模块使用方法详解
2022/04/07 Python