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验证码(vue_drf实现短信验证码)
- vue前端打包发布教程(Vue项目打包、合并及压缩优化网页响应速度)
- vue websocket实时刷新数据(Vue+WebSocket页面实时刷新长连接的实现)
- vue三种判断条件(Vue中插槽和过滤器的深入讲解)
- vue滑动切换页面(vue实现点击翻转效果)
- vuex中action的值怎么接(vuex中Getter的用法详解)
- vue 手机端tab切换页面不刷新(vue Tab切换以及缓存页面处理的几种方式)
- vue多个对象实现双向数据绑定(利用js实现Vue2.0中数据的双向绑定功能)
- vuetable表格合并(vue-table实现添加和删除)
- vue引用js库报错(Vue插件报错:Vue.js is detected on this page.问题解决)
- vue 为什么要使用key(详解vue中v-for的key唯一性)
- vue请求token无效(关于Vue 消除Token过期时刷新页面的重复提示问题)
- vue创建dom节点(Vue批量更新dom的实现步骤)
- vuekeep-alive源码(vue中keepAlive组件的作用和使用方法详解)
- 律界衣品最好,时尚圈学识数高,41岁的Amal堪称现实版的傲骨贤妻(时尚圈学识数高)
- 刘智泰确认出演《Good Wife》 担纲男一号(刘智泰确认出演Good)
- 《傲骨之战》剧终 律政女魔头Diane,为什么是大女主天花板(傲骨之战剧终律政女魔头Diane)
- 汉族(汉族的祖先是谁)
- 中国有几个名族(中国有几个民族没列入56个民族)
- 数学语文题目(语文的数学题)
热门推荐
- c语言可以实现python所有功能吗(Python实现的调用C语言函数功能简单实例)
- python详细讲解类方法的使用(浅谈python标准库--functools.partial)
- centos搭建sftp服务器(Linux云服务器搭建SFTP服务器图片服务器的操作)
- navicat不能连接到mysql报错2013(Navicat连接SQL Server数据:报错08001-命名管道提供程序的完美解决方法)
- 怎样在云服务器上搭建宝塔面板(利用宝塔面板同步服务器时间的实现方法)
- linux部署tomcat项目(阿里云服务器linux系统搭建Tomcat部署Web项目)
- docker 更新容器到镜像(Docker容器如何更新打包并上传到阿里云)
- C#中属性的用法
- python提供的四种基本数据类型(浅谈python的输入输出,注释,基本数据类型)
- sqlserver字段增加删减(关于SQL Server中bit类型字段增删查改的一些事)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9