vue 2.1.3 实时显示当前时间,每秒更新的方法


Posted in Javascript onSeptember 16, 2018

如下所示:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Vue</title> 
 </head>
 <body> 
  <div id="app">
   {{date}}
  </div>
  <!-- 开发环境版本,包含了用帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script type="text/javascript">  
   var app = new Vue({
    el:'#app',
    data:{
     date: new Date()
    },
    mounted () {
     var _this = this; //声明一个变量指向vue实例this,保证作用域一致
     this.timer = setInterval(function() {
      _this.date = new Date();//修改数据date
     }, 1000);
    },
    beforeDestroy () {
     if(this.timer) {
      clearInterval(this.timer);//在vue实例销毁钱,清除我们的定时器
     }
    }    
   });
   
  </script>
 </body>
</html>

vue 2.1.3 实时显示当前时间,每秒更新的方法

以上这篇vue 2.1.3 实时显示当前时间,每秒更新的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 动态生成私有变量访问器
Dec 06 Javascript
JS延迟加载加快页面打开速度示例代码
Dec 30 Javascript
基于JS实现PHP的sprintf函数实例
Nov 14 Javascript
javascript实现九宫格相加数值相等
May 28 Javascript
BootStrap 附加导航组件
Jul 22 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
详解JavaScript添加给定的标签选项
Sep 17 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
vue element中axios下载文件(后端Python)
May 10 Javascript
详解如何写出一个利于扩展的vue路由配置
May 16 Javascript
ES6中new Function()语法及应用实例分析
Feb 19 Javascript
JavaScript 链表定义与使用方法示例
Apr 28 Javascript
vue debug 二种方法
Sep 16 #Javascript
Vue刷新修改页面中数据的方法
Sep 16 #Javascript
Vue中使用vux配置代码详解
Sep 16 #Javascript
在vue中安装使用vux的教程详解
Sep 16 #Javascript
React 组件中的 bind(this)示例代码
Sep 16 #Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
Sep 15 #Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 #Javascript
You might like
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
PHP记录和读取JSON格式日志文件
2016/07/07 PHP
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
JavaScript 三种创建对象的方法
2009/10/16 Javascript
JavaScript 学习笔记(五)
2009/12/31 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
jQuery之自动完成组件的深入解析
2013/06/19 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
AngularJs实现分页功能不带省略号的代码
2016/05/30 Javascript
AngularJS基础 ng-mousemove 指令简单示例
2016/08/02 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
简单了解python的内存管理机制
2019/07/08 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
html5录音功能实战示例
2019/03/25 HTML / CSS
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
params有什么用
2016/03/01 面试题
《小猪家的桃花树》教学反思
2014/04/11 职场文书
书法兴趣小组活动总结
2014/07/07 职场文书
元旦标语大全
2014/10/09 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers
使用Python拟合函数曲线
2022/04/14 Python