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& ...
随机推荐
- IDA技巧
3. 用[shift+F12]调出字符串表,再根据这些字符串,查看引用的地方,也可以分析出一些sub_0XXXX函数的功能. 进入import函数内 x查看调用处 jump to xref 跳到引用 ...
- redis笔记3-命令
通用命令:keys * --查询所有keykeys list* --查询list开头的keytype key1 --查询键对应的value类型del key --删除指定的keyttl key --查 ...
- 【集群】Redis的哨兵模式和集群模式
哨兵模式 哨兵模式是redis高可用的实现方式之一 使用一个或者多个哨兵(Sentinel)实例组成的系统,对redis节点进行监控,在主节点出现故障的情况下,能将从节点中的一个升级为主节点,进行故障 ...
- delphi 运行时提升软件到管理员权限
//以管理员身份运行procedure RunAsAdmin(hWnd: HWND; aFile: string; aParameters: string);varsei: TShellExecute ...
- ORACLE切非归档模式：
C:\Documents and Settings\Administrator>sqlplus /nologSQL> conn / as sysdbaConnected to an idl ...
- 在dos中编译java文件
首先Dos中 编译java文件是:javac (所有)类名.java 运行java文件是:java 包名.类名 java指令默认在寻找class文件的地址是通过CLASSPATH环境变量中指定的目录中 ...
- Python Tuple元组的操作说明
Tuple的特性在于,它的元素是不可变的(immutable),一旦设定,就不能使用索引去修改. >>> t1=1,2,3,4,5 #给Tuple赋值 >>> t1 ...
- ES6 基础内容介绍
参考博客: https://www.cnblogs.com/libin-1/p/6716470.html 一.新的变量声明方式 let/const 与var不同,新的变量声明方式带来了一些不一样的特性 ...
- 【webpack】webpack之postcss-loader的基本使用---【巷子】
一.postcss-loader简介 postcss-loader 用来对.css 文件进行处理,并添加在 style-loader 和 css-loader 之后.通过一个额外的 postcss 方 ...
- Linux 版本查詢
# uname -a 查看 Kernel版本 # cat /etc/redhat-release查看 linux版本(以RedHat為例) 1.核心查詢:uname -a結果:Linux 2.x.x ...