这篇文章给大家介绍怎么在vue中动态实时显示时间，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
vue动态实时显示时间有两种方法
可以用day.js,处理日期和时间的js库
用法 npm install dayjs --save
引入import dayjs from 'dayjs'
然后创建定时器更新最新的时间
this.timeId = setInterval(()=>{ this.sday =dayjs().format('YYYY-MM-DD HH:mm:ss');}, 1000);更多的详情可以查看day.js的api
api文档点这里
使用vue过滤器filters
<template> <el-container id="box"> {{ date | formaDate }} </el-container></template><script> //创建一个函数来增加月日时小于10在前面加0 var padaDate = function(value){ return value<10 ? '0'+value : value; };export default { data() { return { date: new Date(), //实时时间 }; }, watch: { }, computed: {}, filters:{ //设置一个函数来进行过滤 formaDate:function(value){ //创建一个时间日期对象 var date = new Date(); var year = date.getFullYear(); //存储年 var month = padaDate(date.getMonth()+1); //存储月份 var day = padaDate(date.getDate()); //存储日期 var hours = padaDate(date.getHours()); //存储时 var minutes = padaDate(date.getMinutes()); //存储分 var seconds = padaDate(date.getSeconds()); //存储秒 //返回格式化后的日期 return year+'年'+month+'月'+day+'日'+hours+'时'+minutes+'分'+seconds+'秒'; } }, methods: { }, created() { }, mounted() { //创建定时器更新最新的时间 var _this = this; this.timeId = setInterval(function() { _this.sday =dayjs().format('YYYY-MM-DD HH:mm:ss'); }, 1000); this.initmap(); }, beforeDestroy: function() { //实例销毁前青出于定时器 if (this.timeId) { clearInterval(this.timeId); } }};</script><style lang="scss" scoped> </style>附：vue时间戳 获取本地时间，实时更新
<template><p>当前时间：{{nowTime}}</p></template><script>export default{data(){return{nowTime:""}},methods:{getTime(){setInterval(()=>{//new Date() new一个data对象，当前日期和时间//toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串，并返回结果。this.nowtime = new Date().toLocaleString();},1000)}},created(){this.getTime();}}</script>Vue的优点
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。
关于怎么在vue中动态实时显示时间就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
