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去掉字符串里的所有空格
Feb 08 Javascript
JS仿flash上传头像效果实现代码
Jul 18 Javascript
五段实用的js高级技巧
Dec 20 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 Javascript
用json方式实现在 js 中建立一个map
May 02 Javascript
仿JQuery输写高效JSLite代码的一些技巧
Jan 13 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
AngularJS中的Directive实现延迟加载
Jan 25 Javascript
微信小程序开发教程之增加mixin扩展
Aug 09 Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 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
农民和部队如何穿矿
2020/03/04 星际争霸
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
深入PHP内存相关的功能特性详解
2013/06/08 PHP
ThinkPHP之N方法实例详解
2014/06/20 PHP
php实现word转html的方法
2016/01/22 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
js定时调用方法成功后并停止调用示例
2014/04/08 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
详解react服务端渲染(同构)的方法
2017/09/21 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
Python3.6.0+opencv3.3.0人脸检测示例
2018/05/25 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
Python使用Pandas库常见操作详解
2020/01/16 Python
Python底层封装实现方法详解
2020/01/22 Python
Python tkinter模版代码实例
2020/02/05 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
Vita Fede官网:在意大利手工制作,在纽约市设计
2019/10/25 全球购物
越南母婴用品购物网站:Kids Plaza
2020/04/09 全球购物
如何保障Web服务器安全
2014/05/05 面试题
工程概预算专业毕业生求职信
2013/10/04 职场文书
值班管理制度范本
2015/08/06 职场文书
车辆挂靠协议书
2016/03/23 职场文书
react中props 的使用及进行限制的方法
2021/04/28 Javascript
Java中常用解析工具jackson及fastjson的使用
2021/06/28 Java/Android