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和css代码压缩工具[附JAVA环境配置方法]
Apr 16 Javascript
JS上传前预览图片实例
Mar 25 Javascript
JavaScript中rem布局在react中的应用
Dec 09 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
原生js实现ajax方法(超简单)
Sep 20 Javascript
微信小程序之数据缓存的实例详解
Sep 29 Javascript
浅谈Angular文字折叠展开组件的原理分析
Nov 24 Javascript
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
Vue脚手架的简单使用实例
Jul 10 Javascript
VUE实现移动端列表筛选功能
Aug 23 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
Feb 13 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整合PayPal支付
2015/06/11 PHP
详解php实现页面静态化原理
2017/06/21 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
Javascript中的window.event.keyCode使用介绍
2011/04/26 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
微信小程序 scroll-view隐藏滚动条详解
2017/01/16 Javascript
原生js二级联动效果
2017/06/20 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
window下eclipse安装python插件教程
2017/04/24 Python
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
python生成带有表格的图片实例
2019/02/03 Python
Django 批量插入数据的实现方法
2020/01/12 Python
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
丧事答谢词
2015/01/05 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
追悼会悼词大全
2015/06/23 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python
MySQL生成千万测试数据以及遇到的问题
2022/08/05 MySQL