Vue.js 踩坑记之双向绑定


Posted in Javascript onMay 03, 2018

这篇体验一下VUE的双向绑定

<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  <div id="app">
    <input type="text" v-model="CurrentTime" placeholder="当前时刻">
    <h1>当前时刻{{ CurrentTime }}</h1>
  </div>
  <script>
  var app = new Vue({
    el:'#app',
    data:{
      CurrentTime: new Date()
    },
    mounted:function(){
      var _this = this;
      this.timer = setInterval(function(){
        _this.CurrentTime = new Date();
      },1000);
    },
    beforeDestroy:function(){
      if(this.timer){
        clearInterval(this.timer);
      }
    }
  });
  </script>
</body>
</html>

Vue.js 踩坑记之双向绑定 

{{ }} 是所谓的文本插值的方法,目的是显示双向绑定的数据

mounted 表示el挂载到实例上调用的事件

beforeDestory 是实例销毁以前调用

在上例中,在mounted事件中创建了一个定时器,每隔一秒就把当前时间写入文本框中,由于双向绑定的原因,H1标签的文本也会跟着变化,和文本框的文本保持一致。在beforeDestory事件里在Vue实例销毁前则会清除定时器

总结

以上所述是小编给大家介绍的Vue.js 踩坑记之双向绑定,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
图片在浏览器中底部对齐 解决方法之一
Nov 30 Javascript
JS中prototype关键字的功能介绍及使用示例
Jul 21 Javascript
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
May 25 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
Sep 06 Javascript
深入理解jquery中的each用法
Dec 14 Javascript
微信小程序canvas写字板效果及实例
Jun 15 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 Javascript
vue+node+webpack环境搭建教程
Nov 05 Javascript
js数组方法reduce经典用法代码分享
Jan 07 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 Javascript
微信小程序后台持续定位功能使用详解
Aug 23 Javascript
Vue利用canvas实现移动端手写板的方法
May 03 #Javascript
Node.Js中实现端口重用原理详解
May 03 #Javascript
原生JS实现的雪花飘落动画效果
May 03 #Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 #Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 #Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
May 03 #Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
May 03 #Javascript
You might like
php实现中文转数字
2016/02/18 PHP
PHP简单实现DES加密解密的方法
2016/07/12 PHP
浅谈PHP命令执行php文件需要注意的问题
2016/12/16 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
基于jquery的$.ajax async使用
2011/10/19 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
jquery map方法使用示例
2014/04/23 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
2014/06/05 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
推荐4个原生javascript常用的函数
2015/01/12 Javascript
JavaScript动态改变div属性的实现方法
2015/07/22 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
基于对象合并功能的实现示例
2017/10/10 Javascript
JavaScript常用事件介绍
2019/01/21 Javascript
javascript 内存模型实例详解
2020/04/18 Javascript
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
Python函数参数类型*、**的区别
2015/04/11 Python
Python中subprocess模块用法实例详解
2015/05/20 Python
Python下载网络文本数据到本地内存的四种实现方法示例
2018/02/05 Python
Sanic框架路由用法实例分析
2018/07/16 Python
python实现石头剪刀布程序
2021/01/20 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
Python中logger日志模块详解
2020/08/04 Python
python实现简单的tcp 文件下载
2020/09/16 Python
思想政治自我鉴定
2013/10/06 职场文书
历史专业个人求职信范文
2013/12/07 职场文书
店面销售职位的职责
2014/03/09 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
服务理念口号
2014/06/11 职场文书
董存瑞观后感
2015/06/11 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书
感谢信
2019/04/11 职场文书
Python学习开发之图形用户界面详解
2021/08/23 Python