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 相关文章推荐
ExtJS的FieldSet的column列布局
Nov 20 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
Jul 23 Javascript
JS如何将UTC格式时间转本地格式
Sep 04 Javascript
javascript实现信息的显示和隐藏如注册页面
Dec 03 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
详谈jQuery中的this和$(this)
Nov 13 Javascript
每天一篇javascript学习小结(面向对象编程)
Nov 20 Javascript
AngularJS  $on、$emit和$broadcast的使用
Sep 05 Javascript
vue双向绑定的简单实现
Dec 22 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
Dec 12 Javascript
JavaScript this使用方法图解
Feb 04 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
Nov 03 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
封装一个PDO数据库操作类代码
2009/09/09 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
js两种拼接字符串的简单方法(必看)
2016/09/02 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
Python自然语言处理之词干,词形与最大匹配算法代码详解
2017/11/16 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
python中验证码连通域分割的方法详解
2018/06/04 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
Django保护敏感信息的方法示例
2019/05/09 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
Python实现的微信红包提醒功能示例
2019/08/22 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
python判断字符串以什么结尾的实例方法
2020/09/18 Python
露营世界:Camping World
2017/02/02 全球购物
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
linux系统都有哪些运行级别
2012/04/15 面试题
大学生个人总结的自我评价
2013/10/05 职场文书
网游商务专员求职信
2013/10/15 职场文书
项目合作协议书
2014/09/23 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
2015年出纳个人工作总结
2015/04/02 职场文书
详解Python常用的魔法方法
2021/06/03 Python
bose降噪耳机音能消除人声吗
2022/04/19 数码科技
redis lua限流算法实现示例
2022/07/15 Redis