vue如何动态实时的显示时间浅析
更新时间:2021年5月13日 15:00 点击:2104
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动态实时显示时间内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 这篇文章主要介绍了在java中获取List集合中最大的日期时间操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-15
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了教你怎么用Java获取国家法定节假日,文中有非常详细的代码示例,对正在学习java的小伙伴们有非常好的帮助,需要的朋友可以参考下...2021-04-23
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09Vue 列表页带参数进详情页的操作(router-link)
这篇文章主要介绍了Vue 列表页带参数进详情页的操作(router-link),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-13- 这篇文章主要介绍了vue+高德地图实现地图搜索及点击定位操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-09
- 这篇文章主要介绍了vue cli4.0项目引入typescript的方法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-17
mysql中获取一天、一周、一月时间数据的各种sql语句写法
创建表:复制代码 代码如下:create table if not exists t( id int, addTime datetime default '0000-00-00 00:00:00′)添加两条初始数据:insert t values(1, '2012-07-12 21:00:00′);insert t values(2, '2012-07...2014-05-31vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13