Vue 过滤器的功能就是对数据进行格式化处理。它提供了两种常见的方式：一个是在双花括号插值中使用管道符号“|”来进行过滤，比如将消息首字母大写；另一个是在 v-bind 中使用过滤器来对绑定的值进行格式化，比如格式化 ID。

开发者可以通过定义过滤器来自定义常见的格式转换规则，例如把字符串的首字母大写。这个过滤器可以定义在组件内部，也可以定义为全局过滤器。

总结一下：Vue 过滤器相当于一种方便的工具，帮助开发者在显示数据之前对其进行简单的处理，使得代码更简洁。

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
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue Filter Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app">
    <h1>Vue 过滤器示例</h1>

    <!-- 输入框 -->
    <input type="text" v-model="message" placeholder="输入一些文字">

    <!-- 使用过滤器 -->
    <p>原始消息: {{ message }}</p>
    <p>过滤后的消息: {{ message | capitalize }}</p>
  </div>

  <script>
    // 创建 Vue 实例
    new Vue({
      el: '#app',

      // 数据对象
      data: {
        message: ''
      },

      // 定义过滤器
      filters: {
        capitalize: function (value) {
          if (!value) return ''
          value = value.toString()
          return value.charAt(0).toUpperCase() + value.slice(1)
        }
      }
    })
  </script>
</body>
</html>

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。