vue实时显示当前时间且转化为“yyyy-MM-dd hh:mm:ss”格式
在实际运用中时间格式“yyyy-MM-dd hh:mm:ss”用的最多,如果需要其他格式可根据需求自行修改,下面直接上代码:
引入相应的js即可运行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue实时显示当前时间显示</title>
<link rel="stylesheet" href="../css/reset.css">
<script src="../js/jquery/jquery-3.1.1.min.js"></script>
<script src="../js/vue/vue.js"></script>
</head>
<body >
<div id="app">当前实时时间:{{dateFormat(date)}}</div>
<script>
var vm=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实例销毁钱，清除我们的定时器
}
},
methods:{
//时间格式化函数，此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
dateFormat(time) {
var date=new Date(time);
var year=date.getFullYear();
/* 在日期格式中，月份是从0开始的，因此要加0
* 使用三元表达式在小于10的前面加0，以达到格式统一 如 09:11:05
* */
var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
// 拼接
return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
}
}
})
</script>
</body>
</html>
效果如下:
vue实时显示当前时间且转化为“yyyy-MM-dd hh:mm:ss”格式的更多相关文章
- Javascript 客户端实时显示服务器时间
<!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...
- Vue页面上实时显示当前时间，每秒更新
有时候我们需要在页面上添加一个类似时钟的东西来实时显示当前时间,这个时候我们可以利用定时器来完成这个功能 <div id="app"> {{date}} </di ...
- JavaScript实时显示当前时间的例子
用javascript代码在当前页面中实时显示当前时间.代码如下: <html> <head> <title>JavaScript 实时显示当前时间-www.jbx ...
- Qt 实时显示系统时间
前言 我们用一个label控件来实时显示系统时间,用到 QTimer 和 QDateTime 这个两个类. 正题 头文件: #ifndef MAINWINDOW_H #define MAINWINDO ...
- js 时间转字符串，转成yyyy-MM-dd HH:mm:SS格式
// 时间转字符串,转成yyyy-MM-dd HH:mm:SS格式 function dateToStr(datetime){ var dateTime = new Date(datetime); v ...
- Android学习总结——实时显示系统时间
我们都知道System.currentTimeMillis()可以获取系统当前的时间,这里要实时显示就可以开启一个线程,然后通过handler发消息,来实时的更新TextView上显示的系统时间.具体 ...
- JavaScript实时显示当前时间
1.HTML部分 <div id="div1">显示当前时间!</div> 2.css部分 #div1 { width: 700px; height: 50 ...
- Hive日期、时间转换：YYYY-MM-DD与YYYYMMDD；hh.mm.ss与hhmmss的相互转换
思路 YYYY-MM-DD与YYYYMMDD:hh-mm-ss与hhmmss的相互转换有两种办法,第一种是利用UNIX时间戳函数,第二种是利用字符串拼接函数. YYYY-MM-DD与YYYYMMDD相 ...
- vue 2.1.3 实时显示当前时间，每秒更新
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- Flink源码学习笔记(3)了解Flink HA功能的实现
使用Flink HA功能维护JobManager中组件的生命周期,可以有效的避免因为JobManager 进程失败导致任务无法恢复的情况. 接下来分享下 Flink HA功能的实现 大纲 基于Zook ...
- HOW2J 全套教程整理：Java、前端、数据库、中间件、第三方、项目、面试题
考虑到部分同学寝室会断网,原站的所有的免费内容都提供了一个离线版本以供使用.但是它直接提供了静态页面,并不方便在手机上阅读,因为我将其转换为 EPUB. 目录 HOW2J J2EE 教程.epub H ...
- 求一个number数组中的最大值和最小值的差
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...
- Android编译implement、api 和compile区别【转】
感谢大佬:https://blog.csdn.net/fengyeNom1/article/details/81903186 前言 2017 年google 后,Android studio 版本更新 ...
- laravel操作Redis排序/删除/列表/随机/Hash/集合等方法全解
Song • 3563 次浏览 • 0 个回复 • 2017年10月简介 Redis模块负责与Redis数据库交互,并提供Redis的相关API支持: Redis模块提供redis与redis.con ...
- html路径
一.HTML 相对路径和绝对路径区别分析 HTML初学者会经常遇到这样一个问题,如何正确引用一个文件.比如,怎样在一个HTML网页中引用另外一个HTML网页作为超链接(hyperlink)?怎样在一个 ...
- 学习jsp篇：jsp Cookie介绍
这篇博客介绍下Cookie,JSP中比较重要的知识点Session,Cookie,表单数据,过滤器,文件上传.而Session和Cookie一般放在一起讲,在介绍cookie之前,要先介绍下Cooki ...
- Java链式写法
原创:转载需注明原创地址 https://www.cnblogs.com/fanerwei222/p/11613067.html Java 链式写法:详细看代码 package chain; /** ...
- 用Java中的File类模拟实现对系统文件的增删改查效果
码字不易,三连支持一波吧 IO操作向来是各大语言的热区,而对文件的操作也是重中之重. 那么在Java中也给我们提供了很多关于文件操作的类.今天我就用一个比较基本的File类来模拟实现对文件的增删改查效 ...
- 使用纯swift代码文件制作framework
因为最近我们公司的一个客户要求我们使用swift编写程序并且将API封装成framework的形式提供给他们,所以我就开始了swift实践之路. 程序编写完之后,我就琢磨怎么封装成framework的 ...