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

目录

 

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 }}