07.Vue中的过滤器的使用

1.过滤器的本质是一个函数

2.Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 Javascript 表达式的尾部，由“管道”符号指示：  管道符 : |


{
{ message | capitalize }}



注意是：值能是{
{}}里面和v-bind表达式，其它的都不能；

1.全局过滤器

语法:

全局过滤器（在入口文件中定义（main.js））：Vue.fifter（"过滤器名",(值)=>{return "返回处理后的值"}）

代码示意：

// 全局注册
Vue.filter("aaa", val => {
return val.toUpperCase()
})


在main.js中创建一个过滤器的名字为aaa的过滤器，作用将小写的字母转化成大写的字母

 因此可以得出一个结论：全局过滤器可以在任意的vue文件使用

 2.组件过滤器

1.语法

     局部过滤器（在入口文件中定义（在单vue文件夹中定义））    filters: {过滤器名字: (值) => {return "返回处理后的值"}  

2.写的位置，要与data是平级

methods: {
},
filters:{
ccc:val=> val.toUpperCase()
}

3.在单vue文件中定义的文件，只能在此文件中使用

过滤器可以串联：

{
{ message | filterA | filterB }}

定义了过滤器A和过滤器B两个过滤器

代码:

 1.定义阶段

使用翻转过滤器: {
{ msg | reverse('|') }}

2.处理阶段

 reverse(val,a){
      return val.split('').reverse().join(a)
    }

 可以看出过滤器在接收过来传递的参数的时候，有两个，第一个参数val，用来接收过滤器左边的msg变量的值，有边的参数用来接收传过来的 |，依次类推传来的参数，用对应的变量进行接收。