vue项目中定义全局filter

参考博客:

  https://www.cnblogs.com/zhaoxiaoying/p/10723063.html

 

1、在format.js中定义全局filter函数

复制代码
export  default {
    formatDate(value) {
        let date = new Date(value.replace(/-/g, "/"))
        let year =  date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        let hours = date.getHours();
        if(hours<10){
            hours = "0"+ hours;
        }
        let minutes = date.getMinutes();
        if(minutes<10){
            minutes = "0"+ minutes;
        }
        return year +"年" + month + "月" + day + "日" + " " + hours + ":" + minutes;
    },

    //转化直播状态
    formatLiveStatus(status) {
        let temp
        switch(status) {
            case 1:
                temp = "直播中";
                break;
            case 2:
                temp = "已结束";
                break;
            default:
                temp = "待开播";
        }
        return temp;
    },

    //16999
    tranNumber(num, point) {
        let numStr = num.toString()
        if(numStr.length < 5){
            return numStr
        }
        else if (numStr.length < 6) {
            return numStr.substring(0, numStr.length - 3) + "." + numStr.substring(numStr.length - 3, numStr.length - 2) + "k"
        } else {
            return numStr.substring(0, numStr.length - 4) + "." + numStr.substring(numStr.length - 4, numStr.length - 3) + "w"
        }
    }
}
复制代码

 

2、在main.js中引入

import filters from './util/format'

//全局filter
Object.keys(filters).forEach(k => {
  Vue.filter(k, filters[k])
})

 

3、在各个组件中直接使用即可

 

posted @   青岑  阅读(335)  评论(0编辑  收藏  举报
编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?
历史上的今天:
2020-12-20 ElasticSearch — 分词
点击右上角即可分享
微信分享提示
主题色彩