在vue项目中使用过滤器

1、在src目录下utils文件夹里新建一个filter.js文件

//处理游戏用时显示格式 如1分20秒--1'20"
let formatTime = value => {
    if (!value) {
        return ''
    } else{
        return value.replace(/分/g,"'").replace(/秒/g,'"')
    }
}

//在组件中直接调用即可，如 {{item.matchUseTime | formatDate | formatTime}}
export default {
    formatDate,
    formatTime
}

在main.js文件中全局注册过滤器

import filter from './utils/filter' //过滤器

Object.keys(filter).forEach(key => Vue.filter(key, filter[key])) //全局注册过滤器

在页面组件中直接引用即可

 <span class="record-num">{{item.matchUseTime | formatDate | formatTime}}</span>记录

2、也可直接在当前.vue组件里本地注册

filters:{
            //处理游戏用时显示格式 如1分20秒--1'20"
            formatTime(value){
                if (!value) {
                    return ''
                } else {
                    return  value.replace(/分/g,"'").replace(/秒/g,'"')
                }
            }
        },

在HTML里直接使用

<p class="record-time">{{item.pasChallengeUseTime | formatTime}}</p>