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& ...
随机推荐
- json_value.obj) : error LNK2038: 检测到“RuntimeLibrary”的不匹配项: 值“MD_DynamicRelease”不匹配值“MT_StaticReleas
注意版本的提示mD mt 注意动态mfc 还是静态mfc
- 全栈开发React-私有路由
demo import React from 'react'; import {Route,Redirect} from 'react-router-dom' import {connect} fro ...
- 如何在Mac上将视频刻录到DVD / ISO文件
如果您希望将喜爱的视频转换为DVD / Blu-ray光盘以进行物理备份或播放,则Mac版Wondershare UniConverter可以专业地完成任务.今天的教程就是如何在Mac上轻松刻录DVD ...
- ajax中json格式数据如何朝后端发送数据
- oracle-字符串常用函数
1.拼接字符串 1)可以使用“||”来拼接字符串 -------------------------------------- select '拼接'||'字符串' as str from dual ...
- 【Flutter学习】页面布局之宽高尺寸处理
一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...
- Android中通过反射获取资源Id(特别用在自己定义一个工具将其打成.jar包时,特别注意资源的获取)
在将自己写的工具打成.jar包的时候,有时候会需要引用到res中的资源,这时候不能将资源一起打包,只能通过反射机制动态的获取资源. /** * 反射得到组件的id号 */ public static ...
- sql中简单的触发器功能
触发器分为DML触发器和DDL触发器DML触发器包含After触发器,执行insert update delete语句后会触发after触发器,会事务回滚DML触发器还包含instead of触发器, ...
- <自动化测试>之<unittest框架使用1>
要说单元测试和UI自动化之间的是什么样的一个关系,说说我个人的一些心得体会吧,我并没有太多的这方面经验,由于工作本身就用的少,还有就是功能测试点点对于我这种比较懒惰的人来说,比单元测试复杂...思考单 ...
- IE11“__doPostBack”未定义”
IE 11 下<asp:LinkButton> 点击出现 “__doPostBack”未定义” 在项目根目录 App_Browsers 下新建 浏览器文件(.browser),让其与IE1 ...