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 相关文章推荐
javascript 进度条 实现代码
Jul 30 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
May 07 Javascript
JQuery+DIV自定义滚动条样式的具体实现
Jun 25 Javascript
使用jQuery简单实现模拟浏览器搜索功能
Dec 21 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
探索angularjs+requirejs全面实现按需加载的套路
Feb 26 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
May 17 Javascript
js用正则表达式筛选年月日的实例方法
Jan 04 Javascript
Vue的生命周期一起来看看
Feb 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&amp;&amp;mysql)四
2006/10/09 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
模拟select的代码
2011/10/19 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
js获得网页背景色和字体色的方法
2014/03/21 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
jQuery操作基本控件方法实例分析
2015/12/31 Javascript
使用jQuery实现Web页面换肤功能的要点解析
2016/05/12 Javascript
详解nodejs 文本操作模块-fs模块(四)
2016/12/22 NodeJs
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
linux 后台运行node服务指令方法
2018/05/23 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python关键字and和or用法实例
2015/05/28 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
对pandas里的loc并列条件索引的实例讲解
2018/11/15 Python
Python3 单行多行万能正则匹配方法
2019/01/07 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
巴西女装购物网站:Eclectic
2018/04/24 全球购物
Weblogic的布署方式
2013/08/23 面试题
预备党员表决心书
2014/03/11 职场文书
幼儿园三八妇女节活动方案
2014/03/11 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
2014年变电站工作总结
2014/12/19 职场文书
五好家庭申报材料
2014/12/20 职场文书
经费申请报告
2015/05/15 职场文书
生死抉择观后感
2015/06/09 职场文书
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫