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 相关文章推荐
关于实现代码语法标亮 dp.SyntaxHighlighter
Feb 02 Javascript
javascript中用星号表示预录入内容的实现代码
Jan 08 Javascript
单击按钮显示隐藏子菜单经典案例
Jan 04 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
Nov 05 Javascript
js面向对象之静态方法和静态属性实例分析
Jan 10 Javascript
JS实现自适应高度表单文本框的方法
Feb 25 Javascript
Svg.js实例教程及使用手册详解(一)
May 16 Javascript
jquery+ajax实现省市区三级联动效果简单示例
Jan 04 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
JavaScript中严格判断NaN的方法
Feb 16 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
Sep 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
php 三维饼图的实现代码
2008/09/28 PHP
PHP模拟post提交数据方法汇总
2016/02/16 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
Swoole扩展的6种模式深入详解
2021/03/04 PHP
JQuery的ajax基础上的超强GridView展示
2009/09/18 Javascript
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
js获取时间函数及扩展函数的方法
2016/10/30 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
2018/03/21 Javascript
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
Vue和React有哪些区别
2020/09/12 Javascript
在Windows8上的搭建Python和Django环境
2014/07/03 Python
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
浅谈django orm 优化
2018/08/18 Python
Python使用paramiko操作linux的方法讲解
2019/02/25 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
SneakerStudio英国:最佳运动鞋商店
2019/05/22 全球购物
局部内部类是否可以访问非final变量?
2013/04/20 面试题
远东集团网络工程师面试题
2014/10/20 面试题
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
公司财务总监岗位职责
2013/12/14 职场文书
学校校庆演讲稿
2014/05/22 职场文书
岗位工作说明书
2014/07/29 职场文书
物流专业专科生职业生涯规划书
2014/09/14 职场文书
写给医院的感谢信
2015/01/22 职场文书
老乡聚会通知
2015/04/23 职场文书
财务人员入职担保书
2015/09/22 职场文书
用python画城市轮播地图
2021/05/28 Python
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js