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 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
JqGrid web打印实现代码
May 31 Javascript
js前台判断开始时间是否小于结束时间
Feb 23 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
Mar 01 Javascript
jquery mobile实现拨打电话功能的几种方法
Aug 05 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 Javascript
JavaScript实现点击按钮就复制当前网址
Dec 14 Javascript
javascript简易画板开发
Apr 12 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
Jan 30 Javascript
Vue使用mixin分发组件的可复用功能
Sep 01 Javascript
微信小程序实现列表左右滑动
Nov 19 Javascript
vue+elementUI实现表格列的显示与隐藏
Apr 13 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
Zend引擎的发展 [15]
2006/10/09 PHP
php 防止单引号,双引号在接受页面转义
2008/07/10 PHP
php中在PDO中使用事务(Transaction)
2011/05/14 PHP
destoon二次开发入门示例
2014/06/20 PHP
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
JavaScript验证Email(3种方法)
2015/09/21 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
Vue.js 插件开发详解
2017/03/29 Javascript
Jquery中attr与prop的区别详解
2017/05/27 jQuery
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2014/05/05 Python
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
Python中的多行注释文档编写风格汇总
2016/06/16 Python
解决python 输出是省略号的问题
2018/04/19 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
详解python statistics模块及函数用法
2019/10/27 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
Python中求对数方法总结
2020/03/10 Python
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
中学门卫岗位职责
2013/12/26 职场文书
总经理工作职责范文
2014/03/14 职场文书
私用公车造成事故检讨书
2014/11/16 职场文书
销售业务员岗位职责
2015/02/13 职场文书
裁员通知
2015/04/25 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript
vue使用echarts实现折线图
2022/03/21 Vue.js
如何在Python中妥善使用进度条详解
2022/04/05 Python
Python实现信息管理系统
2022/06/05 Python
Java实现超大Excel文件解析(XSSF,SXSSF,easyExcel)
2022/07/15 Java/Android