Vue全局过滤器的使用以及在template三元运算符中内使用过滤

新建filters.js如下，内容过滤可以自己写函数，记得export 导出

import dayjs from "dayjs";

// 转小写
let lower = value => value.toLowerCase();
// 转大写
let upper = value => value.toUpperCase();
let currencyStyle = (value, style) => { // 货币格式
    /**
     * style: 
     *   currency：货币
     *   number： 数字格式
     */
    if (style == 'number') { // 数字格式
        return parseFloat(value.replace(/[^\d\.-]/g, ""));
    } else { // 货币格式, 并保留2位小数
        var n = 2;
        value = parseFloat((value + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
        var l = value.split(".")[0].split("").reverse(),
            r = value.split(".")[1];
        var t = "";
        for (var i = 0; i < l.length; i++) {
            t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
        }
        return t.split("").reverse().join("") + "." + r;
    }
}

/**
 * 时间过滤器
 * @param {*} time 传入毫秒 
 * @returns 返回0′23″这样子
 */
let timeFilter = (time) => { // 货币格式
    if (time == null || time == undefined || time == 0) {
        return time;
    }
    const day = dayjs(0).millisecond(Number.parseInt(time));
    let str = "";
    if (day.minute() >= 0) {
        str += day.minute() + "′";
    }
    if (day.second() >= 0) {
        str += day.second() + "″";
    }
    return str;
}
export {
    lower,
    upper,
    currencyStyle,
    timeFilter
}

在main.js中 引入

//挂载全局过滤
import * as filters from '@/utils/filters.js'
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

使用场景在局部组件内直接用

eg：在三元中使用过滤

    <span >{{item.qualified == null? "-": $options.filters.timeFilter(item.qualified)}}</span>

eg：在页面中直接使用过滤

  <el-table-column label="（表现 | 分数）" align="center" min-width="200">
       <template slot-scope="scope">
           <div class="cur">
               {{scope.row.cantileveredArm | timeFilter }}</span>
           </div>
       </template>
 </el-table-column>