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 高级篇之函数 (四)
Apr 07 Javascript
js判断样式className同时增加class或删除class
Jan 30 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
Jun 24 Javascript
动态加载JavaScript文件的两种方法
Apr 22 Javascript
JS表格组件神器bootstrap table详解(强化版)
May 26 Javascript
Javascript中的数组常用方法解析
Jun 17 Javascript
JS实现unicode和UTF-8之间的互相转换互转
Jul 05 Javascript
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
Dec 08 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
Sep 18 Javascript
原生js实现随机点名功能
Nov 05 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/07/23 PHP
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
laravel 解决crontab不执行的问题
2019/10/22 PHP
任意位置显示html菜单
2007/02/01 Javascript
js字符串转成JSON
2013/11/07 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
nodejs简单抓包工具使用详解
2019/08/23 NodeJs
vue随机验证码组件的封装实现
2020/02/19 Javascript
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
python入门基础之用户输入与模块初认识
2016/11/14 Python
获取python文件扩展名和文件名方法
2018/02/02 Python
通过Pandas读取大文件的实例
2018/06/07 Python
python实现决策树分类
2018/08/30 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
python中wheel的用法整理
2020/06/15 Python
python ssh 执行shell命令的示例
2020/09/29 Python
Python爬虫教程知识点总结
2020/10/19 Python
解决HTML5手机端页面缩放的问题
2017/10/27 HTML / CSS
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
乡镇安全生产目标责任书
2014/07/23 职场文书
交心谈心活动总结
2015/05/11 职场文书
商标侵权律师函
2015/05/27 职场文书
忠诚与背叛观后感
2015/06/04 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书
Go语言带缓冲的通道实现
2021/04/26 Golang
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python
解决Pytorch修改预训练模型时遇到key不匹配的情况
2021/06/05 Python
详细分析PHP7与PHP5区别
2021/06/26 PHP