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 相关文章推荐
XHTML-Strict 内允许出现的标签
Dec 11 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
Dec 08 Javascript
详解JavaScript中setSeconds()方法的使用
Jun 11 Javascript
JavaScript中几种排序算法的简单实现
Jul 29 Javascript
jQuery EasyUi实战教程之布局篇
Jan 26 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
Angular2监听页面大小变化的解决方法
Oct 09 Javascript
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 Javascript
微信小程序常见页面跳转操作简单示例
May 01 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
Oct 14 Javascript
详解Vue3 Composition API中的提取和重用逻辑
Apr 29 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下通过伪造http头破解防盗链的代码
2010/07/03 PHP
ubuntu10.04配置 nginx+php-fpm模式的详解
2013/06/03 PHP
php操作MongoDB基础教程(连接、新增、修改、删除、查询)
2014/03/25 PHP
ThinkPHP CURD方法之limit方法详解
2014/06/18 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
javascript操作css属性
2013/12/30 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
2016/01/14 Javascript
JS实现简单的二维矩阵乘积运算
2016/01/26 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
vue实现抖音时间转盘
2019/09/08 Javascript
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
在nodejs中创建child process的方法
2021/01/26 NodeJs
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
介绍Python的Django框架中的QuerySets
2015/04/20 Python
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
Django实战之用户认证(初始配置)
2018/07/16 Python
Python使用Flask-SQLAlchemy连接数据库操作示例
2018/08/31 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
局域网内python socket实现windows与linux间的消息传送
2019/04/19 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
mac使用python识别图形验证码功能
2020/01/10 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
广州品高软件.net笔面试题目
2012/04/18 面试题
运动会800米加油稿
2014/02/22 职场文书
求职信的正确写法
2014/07/10 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
党员先进性教育整改措施
2014/09/18 职场文书
劳模先进事迹材料
2014/12/24 职场文书
总经理检讨书范文
2015/02/16 职场文书
个人收入证明格式
2015/06/24 职场文书
党风廉政建设心得体会(2016最新版)
2016/01/22 职场文书