vue filter 过滤器 详解

Vue.js 允许你自定义过滤器filter，可被用于一些常见的文本格式化。

（注意vue版本号不同 用法也稍有不同）

接下来咱们就记录一下最常用的filter过滤器用法。（该示例以多个过滤器为例，当然你也可以删掉第二个过滤器自行测试）

1、首先再src目录下 新建目录 filter
2、在filter目录下创建 文件 index.js文件，将项目中的所有过滤器函数统一管理在index.js中。

3、在需要的组件中使用过滤器  filterFun1 与 filterFun2 过滤器函数将会被定义在 filter目录下的index.js中

<template>
<div>
     <ul>
        <!--添加两个过滤器,注意不要冲突,注意先后顺序-->
        <!-- 过滤器函数总接收表达式的值 (item.id) filterFun1 过滤器函数将会收到 item.id 的值作为第一个参数-->
        <!-- filterFun1 被定义为接收单个参数的过滤器函数，表达式 item.id  的值将作为参数传入到函数中。
        然后继续调用同样被定义为接收单个参数的过滤器函数 filterFun2，将 filterFun1 的结果传递到 filterFun2 中。 -->
        <li v-for="item in list" :key="item.id">{{item.id | filterFun1(item.name,item.age) | filterFun2}}</li>
    </ul>
</div>

</template>
<script>
export default {
    data(){
        return{
            list:[
                {"id":0,"name":"张三","age":"18",'address':'北京市'},
                {"id":1,"name":"李四","age":"19",'address':'南京市'},
                {"id":2,"name":"王五","age":"20",'address':'东京市'},
            ]
        }
    },
    methods:{
       
    }
}
</script>

4、在filter目录下的index.js中定义对应得过滤器函数，如下

//项目中的过滤器都定义在此文件中，统一管理
//下面是已经定义好的两个例子
const filterFun1 = function(val,parms1,parms2) {
    return val+parms1+parms2;//默认第一个参数就是默认要过滤的那个值
};
const filterFun2 = function(val) {
    return '人物介绍：'+val;
}
export {
    filterFun1,
    filterFun2
}

5、多个过滤器时，前一个过滤器会将返回值传给下一个过滤器，最后展示得文本以最后一个过滤器返回值为准。

6、运行结果如下：