Vue使用filter实现全局使用时间戳格式转换方法

最新推荐文章于 2024-04-22 09:23:17 发布

weixin_44356647

最新推荐文章于 2024-04-22 09:23:17 发布

阅读量497

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/weixin_44356647/article/details/105292484

版权

在项目中有很多地方需要对时间戳进行转换，为了方便使用，通过全局使用vue的过滤器filter来实现全局调用时间戳格式转换的方法。vue filter 的官网介绍 https://cn.vuejs.org/v2/guide/filters.html.

实例具体步骤：
1、在utils文件夹中创建filters.js文件，编辑时间戳转换成日期的方法。

const formatDate = (date, format) => {
    // 时间戳转换成日期
    format = format || 'yyyy-MM-dd hh:mm:ss';
    date = new Date(date);
    let o = {
      "M+": date.getMonth() + 1, //month
      "d+": date.getDate(), //day
      "h+": date.getHours(), //hour
      "m+": date.getMinutes(), //minute
      "s+": date.getSeconds(), //second
      "q+": Math.floor((date.getMonth() + 3) / 3), //quarter
      "S": date.getMilliseconds() //millisecond
    }
    // RegExp.$1是RegExp的一个属性,指的是与正则表达式匹配的第一个 子匹配(以括号为标志)字符串
    if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
      (date.getFullYear() + "").substr(4 - RegExp.$1.length));//获取年份
    for (let k in o)
      if (new RegExp("(" + k + ")").test(format))
        format = format.replace(RegExp.$1,
          RegExp.$1.length === 1 ? o[k] :
            ("00" + o[k]).substr(("" + o[k]).length));
    return format;
};
export {
    formatDate
}

2、在main.js中引入filters.js

import * as filters from '@/utils/filters.js'
Vue.filter('formatDate', filters['formatDate'])

3、使用

	//如 时间戳 date：1585929599000
（1）在html中使用
	<div>
		{{ date | formatDate('yyyy-mm-dd') }} // 2020-04-03
	</div>
 （2）methods中使用，并传参
	methods:{
		fn(){
			let filter = this.$options.filters['formatDate']
			let data = filter(this.date , 'yyyy-mm-dd')
		}
	}
 （3）在v-html中使用filters
	<p v-html="$options.filters.formatDate(this.date , 'yyyy-mm-dd')"></p>