vue 统一引入全局过滤器

Love The Way You Lie 2022-12-26 08:14 131阅读 0赞

### 一、在filter/index 文件中实现全局过滤器函数 ###

如下所示目录

![20201203180149710.png][]

export function pluralize(time, label) {
      if (time === 1) {
        return time + label;
      }
      return time + label + 's';
    }
    
    
    /* 数字 格式化 */
    export function numberFormatter(num, digits) {
      const si = [
        { value: 1e18, symbol: 'E' },
        { value: 1e15, symbol: 'P' },
        { value: 1e12, symbol: 'T' },
        { value: 1e9, symbol: 'G' },
        { value: 1e6, symbol: 'M' },
        { value: 1e3, symbol: 'k' }
      ];
      for (let i = 0; i < si.length; i++) {
        if (num >= si[i].value) {
          return (
            (num / si[i].value + 0.1)
              .toFixed(digits)
              .replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1') + si[i].symbol
          );
        }
      }
      return num.toString();
    }

### 二、在main.js 中引入过滤函数 ###

import * as filters from './filters'; // global filters
    
    
    Object.keys(filters).forEach(key => {
      Vue.filter(key, filters[key]);
    });

### 三、使用 ###

<span>{
       {num | pluralize('minute')}}</span>

[20201203180149710.png]: /images/20221120/ec060aa68ae14884a74e24f3f8c7bfc8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，131人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue---过滤器---普通过滤器使用、串联过滤器、局部与全局过滤器

过滤器：定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）语法： 1.注册过滤器：Vue.filter(name,callback) 或 new

ゞ浴缸里的玫瑰/ 2024年04月07日 12:53/ 0 赞/ 21 阅读

相关 vue 统一引入全局过滤器

一、在filter/index 文件中实现全局过滤器函数如下所示目录 ![20201203180149710.png][] export function

Love The Way You Lie/ 2022年12月26日 08:14/ 0 赞/ 132 阅读

相关 Vue 中全局过滤器的使用

首先需要在 main.js 中注册过滤器： import filter from './filter/filter' // 全局过滤器 Ob

深藏阁楼爱情的钟/ 2022年12月14日 13:37/ 0 赞/ 187 阅读

相关【vue】vue统一管理全局组件

> `前言` 转载：[https://www.cnblogs.com/zjw2004112/p/11518767.html][https_www.cnblogs.com_zj

待我称王封你为后i/ 2022年11月22日 12:46/ 0 赞/ 158 阅读

相关 vue 全局注册过滤器 filter

随着 vue 的脚手架不断更新，搭建项目的时候很多东西都需要我们自己来配置，比如说过滤器 filter。以我个人习惯为例： 1、创建一个 filters.js 文件，在

﹏ヽ暗。殇╰゛Y/ 2022年11月07日 05:56/ 0 赞/ 206 阅读

相关 Vue 全局自定义过滤器、过滤器公共调用

定义一个全局的自定义过滤器，需要使用Vue.filter()构造器。这个构造器需要两个参数。 Vue.filter() Constructor Parameters: 1.

冷不防/ 2022年05月14日 01:26/ 0 赞/ 303 阅读

相关 Vue引入全局过滤器

创建单独的文件 ![在这里插入图片描述][20190516162536954.png] 加上时间过滤函数将formatDate 暴露export 出来

喜欢ヅ旅行/ 2022年01月31日 11:55/ 0 赞/ 275 阅读

相关 vue_全局注册过滤器

在一个项目中, 某些过滤器全局都有可能用的到, 统一管理并自动化全局注册是很方便的. 代码如下, 后续只需要在src/filters/index.js中添加方法就可以全局使用

向右看齐/ 2021年12月14日 10:43/ 0 赞/ 396 阅读

相关 Vue全局引入JS的方法

两种情况： 1. js为ES5的写法时，如下（自定义的my.js）: <table> <tbody> <tr> <td> <p>1</p> <p>2</p

左手的ㄟ右手/ 2021年12月11日 21:19/ 0 赞/ 480 阅读

相关 vue引入全局过滤器，引入全局公共方法，引入全局变量

-------------------- 多读多写多记录，多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮) ---------

川长思鸟来/ 2021年11月16日 17:38/ 0 赞/ 609 阅读