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教学(尤大大新活petite-vue的实现)
- vue高阶组件怎么用(vue更多筛选项小组件使用详解)
- vue用手动上传图片(vue上传图片文件的多种实现方法)
- vue 单文件组件(vue实现一个单文件组件的完整过程记录)
- vue 父组件传值(Vue两个同级组件传值实现)
- vue创建dom节点(Vue批量更新dom的实现步骤)
- vue过滤器filters怎么用(如何使用vue过滤器filter)
- vue动态生成的下拉框如何获取值(Vue 级联下拉框的设计与实现)
- vue如何在tab标签页循环加定时器(vue实现tab标签标签超出自动滚动)
- vue3 ref 的用法(Vue3中watchEffect的用途浅析)
- vue单元测试实例(Vue-Jest 自动化测试基础配置详解)
- vue移动端页面不能上下滑动(vue移动端实现左滑编辑与删除的全过程)
- 使用vue独立开发组件(vue单文件组件的实现)
- vue父组件怎么用子组件的数据(Vue使用v-model封装el-pagination组件的全过程)
- vue将弹框抽离成组件(vue3 可拖动的左右面板分割组件实现)
- vue时间转换(vue如何动态实时的显示时间浅析)
- 观花盆栽佛肚竹盆景制作及养护(观花盆栽佛肚竹盆景制作及养护)
- 春天养佛肚竹,做好这几件事,叶绿根壮寓意好 越养越旺家(春天养佛肚竹做好这几件事)
- 律界衣品最好,时尚圈学识数高,41岁的Amal堪称现实版的傲骨贤妻(时尚圈学识数高)
- 刘智泰确认出演《Good Wife》 担纲男一号(刘智泰确认出演Good)
- 《傲骨之战》剧终 律政女魔头Diane,为什么是大女主天花板(傲骨之战剧终律政女魔头Diane)
- 汉族(汉族的祖先是谁)
热门推荐
- css3菜单特效(超酷炫 CSS3垂直手风琴菜单)
- xml特殊字符的处理
- 同步、异步、阻塞、非阻塞
- sqlserver基础数据类型(SQL Server中T-SQL 数据类型转换详解)
- apache 的服务器配置(正确维护配置Apache服务器的方法 保护系统安全)
- python创建列表并查询(python列表使用实现名字管理系统)
- python语法规则讲解(计算机二级python学习教程2 python语言基本语法元素)
- @RenderBody、@RenderPage、@RenderSection用法
- dede网站怎么修改数据结构表(Dede中通过SQL调用简略标题shorttitle和链接地址的方法)
- win10上装ubuntu系统(Windows 10 太难用如何定制你的 Ubuntu方法详解)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9