Vue--过滤器(filters)

1.什么是过滤器？

我们转换格式来看，过滤器就是一个函数，传入值后再返回处理后的值

== 过滤器只能用在 v-bind表达式 和 插值表达式 中

2.过滤器的语法

过滤器分----全局过滤器 和 局部过滤器

• Vue.filter("过滤器名",(值) => {return "返回处理后的值"})
• filters:{"过滤器名字": (值) => {return "返回处理后的值"}}

现在我们来看一下过滤器的两个分类

全局过滤器:

下面代码写在mian.js中

// main.js
// 定义一个全局过滤器
Vue.filter("reverse", val => { return val.split("").reverse().join("") })

局部过滤器:

// App.vue

输出的值:

 注意:

1.如果局部过滤器和全局过滤器的名字一样，会使用局部过滤器

2.全局注册最好在main.js中注册, 一处注册到处使用

 3.vue过滤器-传参和多个过滤器

• 语法：

 过滤器传参: vue变量 | 过滤器(实参)

多个过滤器: vue变量 | 过滤器1 | 过滤器2

全局里面对过滤器传参：

// main.js
// 定义一个全局过滤器
Vue.filter("reverse", (val,a) => { return val.split("").reverse().join(a) })

局部过滤器里面添加过滤器：

// App.vue

输出结果：

•  总结: 过滤器可以传参, 还可以对某个过滤器结果, 后面在使用一个过滤器