vue时间转换(vue如何动态实时的显示时间浅析)
类别:编程学习 浏览量:820
时间:2022-04-03 12:34:47 vue时间转换
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动态实时显示时间内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue中的指令及用法(详解Vue进阶构造属性)
- vue怎么更换自定义水印(Vue之全局水印的实现示例)
- vue中的ref(Vue3.0中Ref与Reactive的区别示例详析)
- vue3 动态生成组件(如何在vue3.0+中使用tinymce及实现多图上传文件上传公式编辑功能)
- vue找不到水印设置(Vue使用自定义指令实现页面底部加水印)
- vue的修饰符都有哪些(详解Vue的sync修饰符)
- vue慢动作怎么操作(vue开发之moment的介绍与使用)
- vue3.0零基础入门(快速掌握Vue3.0中如何上手Vuex状态管理)
- vue功能测试和生产环境切换(vue 单元测试的推荐插件和使用示例)
- vue切换图片效果(Vue.js实现图片切换功能)
- vue一个组件两种样式(Vue实现动态样式的多种方法汇总)
- vue加element ui开发项目(Vue+ElementUI之Tree的使用方法)
- vue按需引入elementui组件(vue ElementUI实现异步加载树)
- vue怎么使用element(Vue Element前端应用开发之图标的维护和使用)
- vue 富文本图片上传(vue.js云存储实现图片上传功能)
- vue3中的setup的参数(Vue3中ref与reactive的详解与扩展)
- 冰岛旅游攻略(冰岛旅游攻略及花费八日游)
- 寒假旅游攻略(成都寒假旅游攻略)
- 菲律宾旅游攻略(菲律宾旅游攻略地图)
- 清华大学难考吗(清华大学考研录取分数线)
- 观花盆栽佛肚竹盆景制作及养护(观花盆栽佛肚竹盆景制作及养护)
- 春天养佛肚竹,做好这几件事,叶绿根壮寓意好 越养越旺家(春天养佛肚竹做好这几件事)
热门推荐
- mybatis 分页查询配置(mybatis-plus分页传入参数后sql where条件没有limit分页信息操作)
- mongodb简单介绍和安装
- dedecms自定义字段(详解怎么样让DEDECMS的list标签支持weight排序的方法)
- 阿里云ecs开放所有端口(阿里云ECS实例挂载PE盘使用chroot命令提示“I have no name”错误的解决方法)
- php的模块加载(PHP中的自动加载操作实现方法详解)
- pythonmatplotlib怎么用(Python matplotlib画图与中文设置操作实例分析)
- vue路由跳转的方法(Vue路由监听实现同页面动态加载的示例)
- 同步、异步、阻塞、非阻塞
- canvas处理图片风格(html2 canvas生成清晰的图片实现打印功能)
- css3经典动画效果(CSS3 3D位移translate效果实例介绍)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9