vue 2.1.3 实时显示当前时间，每秒更新
<!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页面上实时显示当前时间，每秒更新
有时候我们需要在页面上添加一个类似时钟的东西来实时显示当前时间,这个时候我们可以利用定时器来完成这个功能 <div id="app"> {{date}} </di ...
- vue实时显示当前时间且转化为“yyyy-MM-dd hh:mm:ss”格式
在实际运用中时间格式"yyyy-MM-dd hh:mm:ss"用的最多,如果需要其他格式可根据需求自行修改,下面直接上代码: 引入相应的js即可运行 <!DOCTYPE ht ...
- JavaScript实时显示当前时间的例子
用javascript代码在当前页面中实时显示当前时间.代码如下: <html> <head> <title>JavaScript 实时显示当前时间-www.jbx ...
- Qt 实时显示系统时间
前言 我们用一个label控件来实时显示系统时间,用到 QTimer 和 QDateTime 这个两个类. 正题 头文件: #ifndef MAINWINDOW_H #define MAINWINDO ...
- Android学习总结——实时显示系统时间
我们都知道System.currentTimeMillis()可以获取系统当前的时间,这里要实时显示就可以开启一个线程,然后通过handler发消息,来实时的更新TextView上显示的系统时间.具体 ...
- JavaScript实时显示当前时间
1.HTML部分 <div id="div1">显示当前时间!</div> 2.css部分 #div1 { width: 700px; height: 50 ...
- js实时显示系统时间
刚刚在做后台页面最上面要动态显示时间刚写了这个代码 将这段代码加入<head></head> <!--时间显示代码 --><script>functio ...
- 用JS实现实时显示系统时间
废话我就不多说了,直接上图和代码了 效果图: 代码视图: 下面为大家附上代码,复制即可用: <!DOCTYPE html> <html lang="en"> ...
- Javascript 客户端实时显示服务器时间
<!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...
随机推荐
- 笔记78 HttpStatus
HttpStatus = { //Informational 1xx 信息 '100' : 'Continue', //继续 '101' : 'Switching Protocols', //交换协议 ...
- Session的load和get方法区别是什么？
①如果没有找到符合条件的记录,get方法返回null值,而load方法会抛出异常: ②get方法直接返回实体类对象,load方法返回实体类对象的代理: ③在Hibernate3之前,get方法只在一级 ...
- jsp 锚定位的方式
//js定位方式1 document.getElementById('id').scrollIntoView(); //jquery定位方式 var t = $('#id').offset().top ...
- cocos2D-X call JNIHelper
#ifndef _WIN32 JNIEnv *j = JniHelper::getEnv(); if (j == nullptr || j == NULL) {test += "JNIEnv ...
- Mysql查看编码方式
查看数据库的字符集 show variables like 'character\_set\_%'; 输出: +--------------------------+--------+ | Varia ...
- Java中如何修改Jar中的内容
一.摘要 好长时间没写blog了,之前换了一家公司.表示工作更有战斗力了,可惜就是没时间写文章了.在这段时间其实是遇到很多问题的,只是都是记录下来,并没有花时间去研究解决.但是这周遇到这个问题没办法让 ...
- sql server 建表，增删改练习
use master --drop database Class create database Class on primary( name='Class', filename='D:\SQLTes ...
- Linux系统之-TCP-IP链路层
一.基本 网络层协议的数据单元是 IP 数据报 ,而数据链路层的工作就是把网络层交下来的 IP 数据报 封装为 帧(frame)发送到链路上,以及把接收到的帧中的数据取出并上交给网络层. 为达到这一目 ...
- Who Saw My Blog
I found that my blog has visitors!!! I wonder who has watched my blog and what did they feel at that ...
- Xcode5 统计单元测试覆盖率（仅限XCTest）
概要 通过本篇文章,你将学会如何在Xcode5下使用统计XCTest测试代码的覆盖率,以及如何快速得到测试覆盖率的图形化报表. 为什么要特别说明Xcode5下的代码覆盖率统计,原因是,以前的方法在新环 ...