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 数组排序函数sort和reverse使用介绍
Nov 21 Javascript
jquery修改网页背景颜色通过css方法实现
Jun 06 Javascript
jquery输入数字随机抽奖特效的简单实现代码
Jun 10 Javascript
微信小程序 实例应用(记账)详解
Sep 28 Javascript
JavaScript 最佳实践:帮你提升代码质量
Dec 03 Javascript
vuejs 单文件组件.vue 文件的使用
Jul 28 Javascript
关于Promise 异步编程的实例讲解
Sep 01 Javascript
AngularJS实时获取并显示密码的方法
Feb 06 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
javaScript实现一个队列的方法
Jul 14 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 Javascript
原生JavaScript实现轮播图
Jan 10 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简单提示框alert封装函数
2010/08/08 PHP
flash用php连接数据库的代码
2011/04/21 PHP
PHP如何解决网站大流量与高并发的问题
2011/06/25 PHP
php switch语句多个值匹配同一代码块的实现
2014/03/03 PHP
PHP解码unicode编码的中文字符代码分享
2014/08/13 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
js 代码集(学习js的朋友可以看下)
2009/07/22 Javascript
div+css布局的图片连续滚动js实现代码
2010/05/04 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
微信小程序template模版的使用方法
2019/04/13 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
浅谈如何优雅处理JavaScript异步错误
2019/11/12 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
Python使用cookielib模块操作cookie的实例教程
2016/07/12 Python
Django入门使用示例
2017/12/12 Python
python版本单链表实现代码
2018/09/28 Python
python爬取内容存入Excel实例
2019/02/20 Python
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
商铺租赁意向书
2014/04/01 职场文书
快餐公司创业计划书
2014/04/29 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
交通安全主题班会
2015/08/12 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python
Redis主从配置和底层实现原理解析(实战记录)
2021/06/30 Redis
Java实现超大Excel文件解析(XSSF,SXSSF,easyExcel)
2022/07/15 Java/Android