07. Vue中的过滤器的使用

一.过滤器的使用和定义

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

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

<!-- 在双花括号中 -->
{
   
   { message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

注意是：值能是{ {}}里面和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.定义阶段

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

    reverse将 |作为一个参数进行传递

2.处理阶段

 reverse(val,a){

      return val.split('').reverse().join(a)

    }

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