vue工程：过滤器filters(文本格式化)使用、文件内复用、全局注册

怼烎@ 2021-07-24 22:13 375阅读 0赞

**目录**

vue工程：过滤器filters(文本格式化)使用、复用、全局注册

一、文本格式化的使用

二、文本格式化的本VUE文件内复用

三、全局注册filter

--------------------

# vue工程：过滤器filters(文本格式化)使用、复用、全局注册 #

过滤器filters是被用于一些常用的文本格式化，比如时间显示的格式，比如数字太大，显示成多少万……

## 一、文本格式化的使用 ##

过滤器添加再表达式的尾部，由管道符号“ | ”表示

<div>{
       { text | capitalize }}</div>    
    //capitalize 是用来格式化text这个表达式，返回结果的函数，需要定义在filters关键字里面

export default {
        data() {
            return {
                text: 'hello'
            }  
        },
    //使用filters关键字，里面存放定义来进行格式化操作的函数
        filters: {
            capitalize: function (value) {
                if (!value) return ''
                value = value.toString()
                return value.charAt(0).toUpperCase() + value.slice(1)
             }
        }
    }

## 二、文本格式化的本VUE文件内复用 ##

有的时候，不仅仅filters内格式化时候需要用到这个函数，在本vue文件里methods也想调用这个函数，但是过滤器是无法通过this直接引用的，再整个同样的函数太浪费了。

**解决办法**：

vue文件中所有的选项配置都会被存储到事例的$options中，所以只需要获取`this.$options.filters` 就可以拿到实例中的过滤器。

this.$options.filters.capitalize

## 三、全局注册filter ##

**应用场景**

有的过滤器使用很频繁，比如时间格式格式化等，在其他vue文件中也可能会使用，这个时候如果每个vue文件都去定义，特别繁琐。这时候可以考虑使用Vue.filter注册全局过滤器

**解决办法**

1、在项目里面添加`filters`目录，然后在filters目录里面添加index.js文件

// filters\index.js
    
    import Vue from 'vue'
    
    Vue.filter('formatDate', value => {
        //code    
    })
    
    //新建一个名为formatDate的格式化函数

2、将filters目录下的index.js文件引入到main.js中

3、vue文件中使用

{
       { item.date | formatDate }}