1.在data中定义一个变量,存储时间

data(){
return {
nowTime:''
}
},

2.给定一个div

<div>{{nowTime}}</div>

3.js部分

 //显示当前时间(年月日时分秒)
timeFormate(timeStamp) {
let year = new Date(timeStamp).getFullYear();
let month =new Date(timeStamp).getMonth() + 1 < 10? "0" + (new Date(timeStamp).getMonth() + 1): new Date(timeStamp).getMonth() + 1;
let date =new Date(timeStamp).getDate() < 10? "0" + new Date(timeStamp).getDate(): new Date(timeStamp).getDate();
let hh =new Date(timeStamp).getHours() < 10? "0" + new Date(timeStamp).getHours(): new Date(timeStamp).getHours();
let mm =new Date(timeStamp).getMinutes() < 10? "0" + new Date(timeStamp).getMinutes(): new Date(timeStamp).getMinutes();
let ss =new Date(timeStamp).getSeconds() < 10? "0" + new Date(timeStamp).getSeconds(): new Date(timeStamp).getSeconds();
this.nowTime = year + "年" + month + "月" + date +"日"+" "+hh+":"+mm+':'+ss ;
},
nowTimes(){
this.timeFormate(new Date());
setInterval(this.nowTimes,1000);
this.clear()
},
clear(){
clearInterval(this.nowTimes)
this.nowTimes = null;
}

4.复制粘贴即可用,主要是使用定时器,每秒调用,最后清除定时器,清除函数

在vue项目中显示实时时间(年月日时分秒)的更多相关文章

  1. Swift3.0 iOS获取当前时间 - 年月日时分秒星期

    Swift3.0 iOS获取当前时间 - 年月日时分秒星期func getTimes() -> [Int] { var timers: [Int] = [] // 返回的数组 let calen ...

  2. C#WinForm中显示实时时间:年/月/日 时/分/秒 星期X

    //加载窗体时 string weekstr = ""; private void Form22_Load(object sender, EventArgs e) { this.t ...

  3. sqlserver 获取时间年月日时分秒

    转自:http://blog.itpub.net/14766526/viewspace-1156100/ select GETDATE() as '当前日期',DateName(year,GetDat ...

  4. C#:获取时间年月日时分秒格式

    //获取日期+时间 DateTime.Now.ToString();            // 2008-9-4 20:02:10 DateTime.Now.ToLocalTime().ToStri ...

  5. java 获得当前时间 年月日时分秒 星期几

    <%SimpleDateFormat df = new SimpleDateFormat("yyyy年MM月dd日 HH时mm分ss秒");//设置日期格式SimpleDat ...

  6. js如何获得系统时间年月日时分秒

    javascript 自带有个对象(构造函数),Date().下面是代码: 回答一: var now = new Date();  var nowTime = now.toLocaleString() ...

  7. mssql 格式化字符串 /时间 年月日时分秒

    比如:1 想格式化 000001,100 格式化为000100: 思路是这样的 1000000 +格式化的数字 取后6位: select   right(cast(power(10,6) as var ...

  8. vue 项目中实用的小技巧

    # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...

  9. vue项目中遇到的那些事。

    前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...

随机推荐

  1. Windows2008R2搭建共享存储服务器

    说明: 为了方便公司个部门软件.项目.文档等资料的归档和保存,实现公司内部资料共享及重要资料备份,防止因个人计算机系统故障或硬件故障导致数据丢失而造成数据无法恢复的损失,特建立共享服务器 1.在共享服 ...

  2. 为什么你精通CRUD,却搞不懂数据库的基本原理?

    原创声明 本文作者:黄小斜 转载请务必在文章开头注明出处和作者. 本文思维导图

  3. 手动使用I2C协议写入24C02C

    刚尝试用AT89C52单片机使用IIC总线协议读写AT24C02C,我忽然想能否用手动调整开关的方式写入AT24C02C?于是,便尝试了一下,结果果然成功了. 关于IIC总线,这篇文章写的很详细:ht ...

  4. mybatis postgresql 批量删除

    一.需求介绍 前端是一个列表页面,列表可以进行复选框的选择,后台进行关联表数据的删除. 二.框架介绍 springboot+mybatis 数据库用的postgresql 三.具体代码(前端js) 1 ...

  5. redis中hash数据类型

    remoteSelf:1>hset website google "www.google.com" "1" remoteSelf:1>hget we ...

  6. 回炉重造之重读Windows核心编程-003-内核对象

    内核对象是个比较难理解的概念,问题的根源就在于即使是<核心编程>书中也没有说清楚它的定义,只是不停地举例和描述它的性质,还有如何使用. 盲人摸象,难见全貌.只能尽可能列举它的性质,注意使用 ...

  7. Windows10官方原版系统下载安装制作方法

    Windows10官方原版系统下载安装制作方法 去官网下载系统安装程序 点进去 https://www.microsoft.com/zh-cn/software-download/windows10 ...

  8. Kubernetes 部署 Nebula 图数据库集群

    Kubernetes 是什么 Kubernetes 是一个开源的,用于管理云平台中多个主机上的容器化的应用,Kubernetes 的目标是让部署容器化的应用简单并且高效,Kubernetes 提供了应 ...

  9. javaConfig&springBoot入门

    javaConfig&springBoot入门 1. javaConfig基础 1.1 为什么要学习javaConfig 因为:Springboot原理基于它的!!!(为学习springBoo ...

  10. 00-django | 01-构建博客目录

    00-django | 01-构建博客目录 python Django 创建blog 进入到 manage.py 文件所在的目录(即项目根目录)下,运行 pipenv run python manag ...