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动态实时显示时间内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 使用Vue开发一个实时性时间转换指令

    使用Vue开发一个实时性时间转换指令

    前言 最近有一个说法,如果你看见某个网站的某个功能,你就大概能猜出背后的业务逻辑是怎么样的,以及你能动手开发一个一毛一样的功能,那么你的前端技能算是进阶中高级水平了.比如咱们今天要聊的这个话题:如何用Vue开发一个实时性的时间转换指令? 接下来正文从这开始~ 如上图所示(我是截取的某技术社区首页的部分页面),大家看到用红色边框勾选中的时间文字了吧.很多网站发布动态的时候,都会有一个相对本机时间转换后的相对时间.那你知道这个功能实现的背后原理是什么吗?如果有兴趣的,请备好瓜子,茶水,继续往下读.

  • Vue filter 过滤当前时间 实现实时更新效果

    过滤器 过滤器是处于客户端与服务器资源文件之间的一道过滤网,在访问资源文件之前,通过一系列的过滤器对请求进行修改.判断等,把不符合规则的请求在中途拦截或修改.也可以对响应进行过滤,拦截或修改响应. 下面通过代码给大家介绍Vue filter 过滤当前时间 实现实时更新,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

  • Vue 中获取当前时间并实时刷新的实现代码

    1. 实现代码 <template> <div> {{nowDate}}{{nowWeek}}{{nowTime}} </div> </template> <script> export default { data(){ return { nowDate: "", // 当前日期 nowTime: "", // 当前时间 nowWeek: "" // 当前星期 } }, methods

  • vue 2.1.3 实时显示当前时间,每秒更新的方法

    如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue</title> </head> <body> <div id="app"> {{date}} </div> <!-- 开发环境版本,包含了用帮助的命令行警告 --> <script src=&

  • 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

  • 浅析GridView中显示时间日期格式的问题

    以下都是GridView基本常用的日期,时间格式 形式 语法 结果 注释 数字 {0:N2} 12.36   数字 {0:N0} 13   货币 {0:c2} $12.36   货币 {0:c4} $12.3656   货币 "￥{0:N2}" ￥12.36   科学计数法 {0:E3} 1.23E+001   百分数 {0:P} 12.25% P and p present the same. 日期 {0:D} 2006年11月25日   日期 {0:d} 2006-11-25  

  • 基于 flexible 的 Vue 组件：Toast -- 显示框效果

    基于 flexible 的 Vue 组件：Toast -- 显示框效果

    基于flexible.js 的 Vue 组件 前言: 目前手头的移动端Vue项目是用手淘的 lib-flexible作适配的,并用px2rem 来自动转换成rem.关于lib-flexible和px2rem的配置,请移步 vue-cli 配置 flexible. 由于使用rem作适配,导致现有的很多移动端UI框架不能与之很好的配合,往往需要大动干戈更改UI框架的样式,背离了使用UI框架达到快速开发的初衷. 为了以后项目的组件复用,以及提高开发可复用组件的能力,特把平时项目中 常用的.简单的 组件

  • Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果

    一.格式化时间 效果图: 实现上述界面代码如下: data() { return { loading: false, demandData: [], demandcount: 0,//总条数 skip: 0, //分页 pageSize: this.LIMIT, columns: [ { title: '编号', width: 60, align: 'center', type: 'index' }, { title: '标签名称', key: 'd_title' }, { title: '创建

  • java采用中文方式显示时间的方法

    本文实例讲述了java采用中文方式显示时间的方法.分享给大家供大家参考.具体如下: 其中t为秒,比如有时候需要计算两个任务相差多久,或者该任务何时结束或者某个任务间隔多久重新启动等适用于本方法.如果是微秒,自己先/1000 private static String chinese_period(int t){ int y, n, d, h, m, s; String time; if(t<=0) return "立即"; s = t % 60; t /= 60; m = t %

  • ASP.NET网站实时显示时间的方法

    本文实例讲述了ASP.NET网站实时显示时间的方法.分享给大家供大家参考.具体方法如下: 在ASP.NET环境中开发设计网站或网络应用程序时,往往需要实时显示当前日期和时间.这时,通常使用AJAX控件来实现. 需要注意的是,在.NET Framework 2.0版本中,工具箱中是没有AJAX Extensions控件的.而.NET Framework 3.5版本中集成了AJAX. ASP.NET AJAX包括三部分: ①一个扩展客户端JavaScript功能的客户端库或框架: ②一个允许ASP.

  • js实现在网页上简单显示时间的方法

    本文实例讲述了js实现在网页上简单显示时间的方法.分享给大家供大家参考.具体如下: 这是一款网页时钟JS代码,纯javascript实现,显示时.分.秒.网页时间显示.网页时钟有很多,这个真的挺简易的,美工好的朋友可在此基础上进一步美化完善 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tr

  • php显示时间常用方法小结

    本文实例讲述了php显示时间常用方法.分享给大家供大家参考.具体分析如下: 一.PHP函数Date()获取当前时间 代码: 复制代码 代码如下: <?php echo $showtime=date("Y-m-d H:i:s");?> 显示的格式: 年-月-日 小时:分钟:秒 相关参数: a:"am"或者"pm" A:"AM"或者"PM" d:几日,二位数字,若不足二位则前面补零,如: "

  • 详解PHP使用日期时间处理器Carbon人性化显示时间

    本文介绍了PHP使用日期时间处理器Carbon人性化显示时间,分享给大家,具体如下: Carbon 日期时间处理库可以很方便的处理时间,github地址为https://github.com/briannesbitt/carbon 可以通过 Composer 很方便的来安装 Carbon # composer require nesbot/carbon 使用方法也很简单 <?php require 'vendor/autoload.php'; use Carbon\Carbon; //显示中文

随机推荐