过滤器

过滤器（Filters） 是vue为开发者提供的功能，用于文本的格式化，过滤器可以在 插值表达式 和 v-bind 属性绑定使用

过滤器应该被卸载 JavaScript 表达式的尾部，由| 符号来调用

快速使用

  • 代码
  • 效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div id="app">
  <p>message 的值是：{{ message | capi }}</p>
</div>
<div id="app2">
  <p>message 的值是：{{ message | capi }}</p>
</div>
<script>
  // 使用 Vue.filter() 定义全局过滤器
  Vue.filter('capi', function (str) {
    const first = str.charAt(0).toUpperCase()
    const other = str.slice(1)
    return first + other + '~~~'
  })
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'hello vue.js'
    },
    // 过滤器函数，必须被定义到 filters 节点之下
    // 过滤器本质上是函数
    filters: {
      // 注意：过滤器函数形参中的 val，永远都是“管道符”前面的那个值
      capi(val) {
        // 字符串有 charAt 方法，这个方法接收索引值，表示从字符串中把索引对应的字符，获取出来
        // val.charAt(0)
        const first = val.charAt(0).toUpperCase()
        // 字符串的 slice 方法，可以截取字符串，从指定索引往后截取
        const other = val.slice(1)
        // 强调：过滤器中，一定要有一个返回值
        return first + other
      }
    }
  })
  const vm2 = new Vue({
    el: '#app2',
    data: {
      message: 'heima'
    }
  })
</script>

过滤器的注意点

  1. 要定义到 filters 节点下，本质是一个函数
  2. 在过滤器函数中，一定要有 return 值
  3. 在过滤器的形参中，可以获取到“管道符”前面待处理的那个值
  4. 如果全局过滤器和私有过滤器名字一致，此时按照“就近原则”，调用的是”私有过滤器“

品牌列表案例优化

我们可以写一个过滤器把《品牌列表案例》中的时间进行格式化

  • 代码
  • 效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<td>{{ item.time | dateFormat }}</td>
<script src="./lib/dayjs.min.js"></script>
<script src="./lib/vue-2.6.12.js"></script>
<script>
    // 声明格式化时间的全局过滤器
    Vue.filter('dateFormat', function (time) {
      // 1. 对 time 进行格式化处理，得到 YYYY-MM-DD HH:mm:ss
      // 2. 把 格式化的结果，return 出去

      // 直接调用 dayjs() 得到的是当前时间
      // dayjs(给定的日期时间) 得到指定的日期
      const dtStr = dayjs(time).format('YYYY-MM-DD HH:mm:ss')
      return dtStr
    })
</script>

过滤器的一些其他事项

连续调用过滤器

过滤器可以串联起来进行调用，如：

1
2
3
4
<!-- 把 message 的值交给 filterA 处理 -->
<!-- 把 filterA处理后的值交给 filterB 处理 -->
<!-- 把 filterB处理后的值渲染在页面中 -->
<td>{{ message | filterA | filterB }}</td>

过滤器调用传参

过滤器本质是一个Javascript的函数，因此可以接受参数

1
2
3
4
5
6
7
8
9
10
11
<!-- arg1和arg2 是传递给 filterA的参数 -->
<p>{{message | filterA(arg1,arg2) }}</p>

<script>
    //过滤器处理函数的形参列表中：
    // 第一个参数：永远都是 "|" 前面待处理的值
    // 从第二个参数开始，才是通过管道过滤器传递过来的 arg1 和 arg2 参数
    Vue.filter('filterA',(msg,arg1,arg2)=>{
        //代码处理
    })
</script>