1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > vue3 使用计算属性代替 filter 过滤器实现时间格式化操作

vue3 使用计算属性代替 filter 过滤器实现时间格式化操作

时间:2019-09-03 00:29:28

相关推荐

vue3 使用计算属性代替 filter 过滤器实现时间格式化操作

由于vue3没有了 filter 过滤器,所以我尝试了用计算属性代替它去格式化时间

方法如下:

1、在页面按需引用

import formatDate from '../assets/js/FormatDate'// computed 与setup同级computed: {formatDate() {return formatDate;},},

2、在页面使用

formatDate('.3.6', "hh:mm dd/MM/yyyy")

ps: 以下为完整的格式化时间文件代码

// 用于格式化时间function formatDate(value, format) {//value: 需要格式化的数据//format: 指定格式 yyyy-MM-dd hh:mm:sslet date = new Date(value);// 获取年份let year = date.getFullYear();if (/(y+)/.test(format)) {// 获取匹配组的内容let content = RegExp.$1;format = format.replace(content, year.toString().slice(4 - content.length));}let o = {// y: date.getFullYear(), // 用这一句也行,但只适用于四位数显示时候用M: date.getMonth() + 1,d: date.getDate(),h: date.getHours(),m: date.getMinutes(),s: date.getSeconds()};for (let key in o) {// 构造动态正则let reg = new RegExp(`(${key}+)`);if (reg.test(format)) {// 获取匹配组的内容let content = RegExp.$1;let k = o[key] >= 10 ? o[key] : content.length == 2 ? '0' + o[key] : o[key];format = format.replace(content, k);}}return format;}export default formatDate

欢迎大家讨论交流~

扫码加q群

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。