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解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
Feb 02 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 Javascript
调用HttpHanlder的几种返回方式小结
Dec 20 Javascript
js获得参数的getParameter使用示例
Feb 26 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 Javascript
基于JavaScript实现右键菜单和拖拽功能
Nov 28 Javascript
Bootstrap实现各种进度条样式详解
Apr 13 Javascript
使用Math.max,Math.min获取数组中的最值实例
Apr 25 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
Jun 15 Javascript
Js利用prototype自定义数组方法示例
Oct 20 Javascript
微信小程序button标签open-type属性原理解析
Jan 21 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开发需要注意的安全问题
2010/09/01 PHP
解决PHP在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
用PHP实现浏览器点击下载TXT文档的方法详解
2013/06/02 PHP
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
canvas实现绘制吃豆鱼效果
2017/01/12 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
js实现星星海特效的示例
2020/09/28 Javascript
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
python使用opencv读取图片的实例
2017/08/17 Python
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
Python坐标线性插值应用实现
2019/11/13 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
DNA测试:Orig3n
2019/03/01 全球购物
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
什么是静态路由?什么是动态路由?各自的特点是什么?
2015/09/16 面试题
公共事业管理本科生求职信
2013/10/07 职场文书
幼儿园课题方案
2014/06/09 职场文书
学校搬迁方案
2014/06/15 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
三八妇女节主持词
2015/07/04 职场文书
追悼会家属答谢词
2015/09/29 职场文书
python异步的ASGI与Fast Api实现
2021/07/16 Python
解决IIS7下无法绑定https主机的问题
2022/04/29 Servers