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

在项目中有很多地方需要对时间戳进行转换,为了方便使用,通过全局使用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:15859295990001)在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>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值