vue 实时显示当前时间

<script>
export default {data () {return {date:new Date()}},methods:{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;}},mounted() {//显示当前日期时间let _this = this// 声明一个变量指向Vue实例this，保证作用域一致this.timer = setInterval(() => {_this.date = new Date(); // 修改数据date}, 1000)},beforeDestroy() {if (this.timer) {clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器}}
}
</script>

使用

<template><div class="wrapper"><el-card><h4>实时更新时间:</h4>{{dateFormat(date)}}</el-card></div>
</template>

效果图

vue 实时显示当前时间相关推荐

vue实时显示日期时间星期几
描述:页面实时展示年月日时分秒和星期几 <template><div class="header"><div>{{ date }} {{ w ...
实时显示当前时间，每秒更新
实时显示当前时间,每秒更新我们可以利用定时器来完成这个功能 HTML <div id="app">{{date}} </div> JS <scrip ...
【响应式Web前端设计】在html页面实时显示系统时间
在html页面实时显示系统时间桌面新建记事本,将下列代码复制粘贴,重命名后缀为.html,保存,用浏览器打开即可 <html> <head><meta http-equ ...
实时显示当前时间（中文版）
前言:实时显示当前时间(中文版),一周的第几天用中文显示效果: <!DOCTYPE html> <html lang="zh"><head>& ...
在html页面实时显示系统时间
在html页面实时显示系统时间桌面新建记事本,将下列代码复制粘贴,重命名后缀为.html,保存,用浏览器打开即可 <html> <head><meta http-equ ...
实时显示当前时间（英文版）
前言:实时显示当前时间(英文版),一周的第几天用英文显示效果: <!DOCTYPE html> <html lang="zh"><head>& ...
【Unity】在Unity中实时显示北京时间
感觉在网上搜到的大部分Unity或者C#获取北京时间的方法都已经不提供服务了,搜到一个可用的稍微拓展下做成了实时显示北京时间的脚本. 但因为只在程序启动的时候有获取北京时间,接下来显示的时间都是每秒钟 ...
使用js实时显示北京时间
今天由于项目需要,需要在网站首页显示实时的北京时间, 在网上扒了一会儿,感觉没看明白怎么回事儿,最后还是从别的网站上copy来的,所以这次不是原创啊.哈哈 1.首页引入jquery.min.js 2. ...
使用定时器编程，在实时显示当前时间，每隔2秒时钟内容更新一次
编写一个java application应用程序,使用定时器编程,在实时显示当前时间,每隔2秒时钟内容更新一次. 定时器Timer类程序代码: 运行结果: 定时器Timer类 Timer是一种定时器 ...
html+显示在线时间,在html页面实时显示系统时间
原创散场前的温柔最后发布于2018-11-05 13:24:58 阅读数 16005 收藏展开在html页面实时显示系统时间桌面新建记事本,将下列代码复制粘贴,重命名后缀为.html,保存, ...

vue 实时显示当前时间

vue 实时显示当前时间相关推荐

最新文章

热门文章