filters - vue自定义filters过滤器

1、全局过滤器
① 新建一个js页面，将方法写入，并且用export抛出
export function funName () { return 'xxxx' }
② 在需要用到的页面引入，导出对象就可以使用了,如所有页面都要用，引入放在index.js就行了

// 引入所有的过滤函数
import { funName } from '路径.js';
// 使用
在标签上 {{ funName | 值 }}，在js代码里面直接按方法引用funName()

2、组件中定义过滤器
过滤器内是没有this引用的，过滤器内的this是undefined，所以不要在过滤器内尝试使用this引用组件实例的变量或者方法。

<template>
    <div>
        <--女-->
        <p>{{sex | changeTxt}}</p>  
        <--  girl  串联过滤器 -->
        <p>{{sex | changeTxt | changEnglish}}</p> 
    </div>
</template>

data () {
    sex: 1 //性别
},
filters: {
    changeTxt (val) {
        if (val == 1) {
             return "女";
        }else {
            return "男";
        }
    },
    changEnglish(val) {
        if(val == '女') {
            return "gril";
        }else {
            return "boy";
        }
    }
}

}

3、使用方法
过滤器函数可以使用在两个地方:
① 双大括号表达式 {{ 文本字符串 | 过滤函数 }}
② v-bind:str= "文本字符串 | 过滤函数"

过滤器只是在使用的地方会根据需求做不同的文本显示，并不会改变值