vue 中的过滤器filters使用详解

Vue 中的过滤器

1. 过滤器是什么

在 Vue 2 中，过滤器（filters） 是用于对数据进行格式化的小型工具，主要用于模板表达式，方便处理文本展示时的格式化工作。过滤器不会改变原始数据，只影响数据的显示方式。

2. 应用场景

• 文本格式化：如将字符串首字母大写或将全局文本转为大写。
• 日期格式化：将时间戳转为易读的日期格式。
• 数字处理：如千分位分隔符或小数点处理。
• 货币格式化：将数字转为货币符号格式。

3. 如何使用过滤器

全局过滤器

全局过滤器可以通过 Vue.filter 方法定义，它可以在任何组件中使用：

// 注册全局过滤器
Vue.filter('capitalize', function(value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
});

然后在模板中使用：

<p>{{ message | capitalize }}</p>

局部过滤器

局部过滤器是在单个 Vue 实例或组件中定义的，它只能在该组件中使用：

new Vue({
  el: '#app',
  data: {
    message: 'hello world'
  },
  filters: {
    capitalize(value) {
      if (!value) return ''
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
});

同样可以通过管道符 | 在模板中使用：

<p>{{ message | capitalize }}</p>

4. 源码分析

过滤器的核心实现是在模板编译阶段将表达式通过过滤器函数进行处理。Vue 内部会解析模板中的 {{ message | filterName }}，生成对应的函数调用，并在渲染时执行这个函数来返回过滤后的值。

在 Vue 2 的源码中，过滤器主要通过 compile 函数实现，它会处理模板中的管道符，并在生成渲染函数时调用过滤器方法。

5. Vue 3 的变化

在 Vue 3 中，过滤器功能被移除，官方建议用计算属性或方法来替代过滤器的使用场景。

6. JavaScript 实现一个简单过滤器

在没有 Vue 的场景下，可以通过简单的函数实现类似的过滤器效果：

// 定义一个简单的过滤器函数
function capitalize(value) {
  if (!value) return ''
  return value.charAt(0).toUpperCase() + value.slice(1)
}

// 测试数据
let message = "hello world";
console.log(capitalize(message));  // 输出: "Hello world"

7. 结论

Vue 的过滤器为处理文本格式化提供了简便的途径，特别是在模板中进行简单的数据处理时非常方便。尽管 Vue 3 中取消了过滤器，但其理念依然可以通过计算属性或方法来实现相似功能。