vue 统一引入全局过滤器

Love The Way You Lie 2022-12-26 08:14 211阅读 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 条评论，211人围观）

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

相关阅读

相关 vue项目引入全局vuex

Vuex 是一个全局的共享数据存储区域，相当于一个数据的仓库，Vuex是为了保存组件之间共享数据而诞生的，如果组件之间有要共享的数据，可以直接挂载到vuex中，而不必通过父子组

爱被打了一巴掌/ 2023年06月29日 13:59/ 0 赞/ 61 阅读

相关 vue项目引入全局css

1.在assets文件夹中创建全局样式表css文件 ![在这里插入图片描述][20191118135750954.png] 2.在global.css文件中写入全局样式

怼烎@/ 2023年06月14日 04:14/ 0 赞/ 29 阅读

相关 VUE_vue如何定义全局过滤器

一、 main.js中定义全局过滤器 nameFiltes：过滤器名称，值为一个方法 Vue.filter('nameFiltes',function(data

布满荆棘的人生/ 2023年02月23日 12:12/ 0 赞/ 49 阅读

相关 Vue 过滤器案例（全局过滤器和局部过滤器）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

「爱情、让人受尽委屈。」/ 2023年02月22日 05:15/ 0 赞/ 61 阅读

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

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

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

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

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

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

相关 vue 全局注册过滤器 filter

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

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

相关 Vue引入全局过滤器

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

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

相关 vue_全局注册过滤器

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

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

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

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

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