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 关于=+与+=日期函数使用说明(赋值运算符)
Nov 15 Javascript
jQuery LigerUI 使用教程入门篇
Jan 18 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
jquery 鼠标滑动显示详情应用示例
Jan 24 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 Javascript
JavaScript更改原始对象valueOf的方法
Mar 19 Javascript
Vue渲染函数详解
Sep 15 Javascript
JS数组求和的常用方法实例小结
Jan 07 Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 Javascript
js如何获取图片url的Blob值并预览示例代码
Mar 07 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 17 Javascript
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
深入理解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 读取shell管道传输过来的内容
2010/03/01 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
jquery 实现上下滚动效果示例代码
2013/08/09 Javascript
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
2016/01/28 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
JS全局变量和局部变量最新解析
2016/06/24 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
2016/09/05 Javascript
JavaScript设计模式之单体模式全面解析
2016/09/09 Javascript
js实现二级导航功能
2017/03/03 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
python读取各种文件数据方法解析
2018/12/29 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
2020/07/31 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
html5菜单折纸效果
2014/04/22 HTML / CSS
全球在线商店:BerryLook
2019/04/14 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
PHP如何防止SQL注入
2014/05/03 面试题
网络技术专业求职信
2014/05/02 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
学生退学证明
2015/06/23 职场文书
教师节随笔
2015/08/15 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
大学生村官工作心得体会
2016/01/23 职场文书