vue如何动态实时的显示时间浅析
vue动态实时显示时间有两种方法
1.可以用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文档点这里
2.使用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动态实时显示时间内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
关于在vscode使用webpack指令显示"因为在此系统中禁止运行脚本"问题(完美解决)
这篇文章主要介绍了解决在vscode使用webpack指令显示"因为在此系统中禁止运行脚本"问题,本文给大家分享完美解决方法,需要的朋友可以参考下2021-07-07Vue集成three.js并加载glb、gltf、FBX、json模型的场景分析
这篇文章主要介绍了Vue集成three.js,并加载glb、gltf、FBX、json模型,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-09-09关于iview和elementUI组件样式覆盖无效问题及解决
这篇文章主要介绍了关于iview和elementUI组件样式覆盖无效问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-09-09
最新评论