目录

一、局部过滤器

二、全局过滤器

三、过滤器串联

四、过滤器接收多个参数 

        Vue.js允许自定义过滤器，过滤器的作用可被用于一些常见的文本格式化（也就是修饰文本，但是文本内容不会改变）

过滤器可以用在两个地方：双花括号插值或v-bind表达式

一、局部过滤器

局部过滤器使用示例：

    <div id="root"><p>电脑价格：{{price | addPriceIcon}}</p></div><script>Vue.config.productionTip = false;const vm = new Vue({el: '#root',data: {price:200},filters: {//处理函数addPriceIcon(value){console.log(value);return '¥' + value;}}})</script>

执行结果：

         这段代码的需求是在价格前面加上人民币符号（¥）。模板中文版（price）后边需要添加管道符号（|）作为分隔，管道符（|）后边是文本的处理函数（addPriceIcon），处理函数的第一个参数是管道符前边的文本内容（price）。        

二、全局过滤器

全局过滤器使用示例：

    <div id="root"><p>电脑价格：{{price | addPriceIcon}}</p></div><script>Vue.config.productionTip = false;Vue.filter("addPriceIcon",(value)=>{return '¥' + value;})const vm = new Vue({el: '#root',data: {price:200}})</script>

执行结果：

 注意：当全局过滤器和局部过滤器重名时，会采用局部过滤器

三、过滤器串联

过滤器还可以串联，例如：

{{price | filterA  | filterB}}

        filterA被定义为接收单个参数的过滤器参数，表达式price的值将被作为参数传入参数。然后继续调用同样被定义接收单个参数的过滤器函数filterB，将filterA的结果传递到filterB中。

过滤器串联示例：

    <div id="root"><p>电脑价格：{{price | addPriceIcon | addChinesePriceIcon}}</p></div><script>Vue.config.productionTip = false;Vue.filter("addPriceIcon",(value)=>{return '¥' + value;})Vue.filter("addChinesePriceIcon",(value)=>{return '人民币' + value;})const vm = new Vue({el: '#root',data: {price:200}})</script>

执行结果：

四、过滤器接收多个参数 

过滤器是JavaScript函数，因此可以接收两个参数：

{{ price | filterA(arg) }}

        filterA被定义为接收两个参数的过滤器参数。其中price的值作为第一个参数，表达式arg的值可作为第二个参数，也可接收多个参数

过滤器接收两个参数示例：

    <div id="root"><p>电脑价格：{{price | addPriceIcon(unit)}}</p></div><script>Vue.config.productionTip = false;const vm = new Vue({el: '#root',data: {price:200,unit:"(元)"},filters: {// 处理函数addPriceIcon(value1,value2){return '¥' + value1 + value2;}}})</script>

执行结果：

过滤器接收多个参数示例：

    <div id="root">{{al | filterAa(a2,a3,...an...)}}</div><script>filters: {// 处理函数addPriceIcon(a1,a2,a3,...an...){//a1是传入的第1个参数//a2是传入的第2个参数//a3是传入的第3个参数//......//an是传入的第n个参数}</script>