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. css position absolute相对于父元素的设置方式

    手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 大家知道css的position abs ...

  2. vue路由--动态路由

    前面介绍的路由都是路径和组件一对一映射的 有时候需要多个路径映射到一个组件,这个组件根据参数的不同动态改变,这时候需要用到动态路由 动态路由这样定义路由路径: path: '/foo/:id'--可以 ...

  3. js+vue、纯js 按条件分页

    听说大牛都从博客开始的... 人狠话不多,翠花上酸菜代码: 有注解基本上都看的懂!但是自己还是要注意以下几点,免得以后再浪费时间. #.vue 中监听事件 v-on:change=“vueChange ...

  4. Mock模拟数据,前后端分离

    安装 使用npm安装: npm install mockjs; 或直接<script src="http://mockjs.com/dist/mock.js">< ...

  5. MyEclipse10下载安装破解及汉化内含jdk8u241及其帮助文档

    下载MyEclipse10以及破解包 MyEclipse10: 提取码:020c 破解包 提取码:mycj 注:破解包内含有破解教程,很详细,这里就不多说了 MyEclipse10汉化 操作系统:wi ...

  6. java 入门如何设计类

    2019/12/24   |    在校大二上学期    |    太原科技大学 初学java后,我们会发现java难点不在于Java语法难学,而是把我们挂在了如何设计类的“吊绳”上了.这恰恰也是小白 ...

  7. MySql学习-1.MySql的安装:

    1.安装包的下载(mysql-v5.7.25 )(NavicatforMySQL_11.2.15): 链接:https://pan.baidu.com/s/166hyyYd3DMjYhMwdW805F ...

  8. JS事件流、DOM事件流、IE事件处理、跨浏览器事件处理、事件对象与类型

    事件的移除 removeEventListener() 第二个参数需要指定要移除的事件句柄,不能是匿名函数,因为无法识别 想要移除成功,那么三个参数必须跟addEventListener中的三个完全一 ...

  9. opencv —— setMouseCallback 响应鼠标操作事件

    鼠标操作:setMouseCallback 函数 借助回调函数,实现对鼠标每次操作的相应,即每进行一步鼠标操作,都会执行一次回调函数. void setMouseCallback(const stri ...

  10. java.lang.ClassCastException:java.util.LinkedHashMap不能转换为com.testing.models.xxx

    后台接收前台的json字符串 转pojo 问题(Object 对应定义的pojo) ObjectMapper mapper=new ObjectMapper(); Object object = ma ...