vue如何动态实时的显示时间浅析

编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要给大家介绍了关于vue如何动态实时的显示时间,以及vue时间戳 获取本地时间实时更新的相关资料,需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧

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);

更多的详情可以  

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动态实时显示时间内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO!

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板