第一阶段：Vue 基础入门（第 11 天）

好的，我们来详细梳理一下 Vue 中的过滤器 (filter)。

Vue 过滤器 (`filter`)

过滤器是 Vue 提供的一种用于格式化文本的机制。它可以在两个地方使用：

插值表达式 ({``{ }}) 中
v-bind 指令表达式 中

过滤器的主要目的是将原始数据转换成更符合展示需求的格式，而无需修改原始数据本身。它是一种增强数据展示可读性和复用性的优雅方式。

核心知识点

过滤器的概念
- 本质是一个函数。
- 它接收一个值（管道符 | 前面的表达式结果）作为其第一个参数。
- 它可以接收额外的参数。
- 它返回处理后的值（格式化后的字符串或其他类型）。
- 使用管道符 | 将数据传递给过滤器：
  html 复制代码
```

{{ message | capitalize }} 
{{ price | currency('¥') }} 
{{ date | formatDate('YYYY-MM-DD') | localize }} 


<div v-bind:id="rawId | formatId"></div>
```
过滤器的分类
- 全局过滤器 ：通过 Vue.filter() 定义，可以在所有 Vue 实例和组件中使用。
- 局部过滤器 ：在 Vue 实例或组件的 filters 选项中定义，仅能在该实例或组件及其子组件中使用。
全局过滤器的定义
- 使用 Vue.filter(name, function) 方法定义。
- name：过滤器的名称。
- function：过滤器函数。第一个参数是待处理的值，后续参数是调用时传入的参数。
javascript 复制代码
```
// 定义一个将字符串首字母大写的全局过滤器
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})
```

局部过滤器的定义

在 Vue 实例或组件的 filters 选项中定义。
选项是一个对象，键是过滤器名，值是过滤器函数。

javascript 复制代码

new Vue({
  // ... 其他选项
  filters: {
    // 定义一个将数字转为两位小数的局部过滤器
    toFixedTwo: function (value) {
      if (typeof value !== 'number') return value
      return value.toFixed(2)
    }
  }
})

过滤器的传参

过滤器函数可以接收多个参数。
第一个参数 始终是管道符 | 前面的原始值。
后续参数是在调用过滤器时传递的参数。

javascript 复制代码

Vue.filter('formatDate', function (value, formatStr) {
  // value 是原始日期值 (如时间戳)
  // formatStr 是传入的格式化字符串参数 (如 'YYYY-MM-DD')
  // ... 使用 day.js 或 moment.js 等库进行格式化
  return formattedDateString
})

html 复制代码

{{ timestamp | formatDate('YYYY-MM-DD HH:mm:ss') }}

案例代码

全局过滤器：格式化日期

javascript 复制代码

// 假设使用 day.js (需先引入)
Vue.filter('formatDate', function (timestamp, format = 'YYYY-MM-DD') {
  if (!timestamp) return '';
  return dayjs(timestamp).format(format);
});

html 复制代码

<p>发布时间：{{ article.publishTime | formatDate }}</p>
<p>精确时间：{{ article.publishTime | formatDate('YYYY-MM-DD HH:mm:ss') }}</p>

局部过滤器：格式化金额

javascript 复制代码

new Vue({
  el: '#app',
  data: {
    productPrice: 1234567.89
  },
  filters: {
    formatCurrency: function (value, symbol = '¥') {
      if (typeof value !== 'number') return value;
      // 添加千分位分隔符
      const parts = value.toFixed(2).split('.');
      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
      return symbol + parts.join('.');
    }
  }
})

html 复制代码

<p>价格：{{ productPrice | formatCurrency }}</p> <!-- 输出：¥1,234,567.89 -->
<p>价格：{{ productPrice | formatCurrency('$') }}</p> <!-- 输出：$1,234,567.89 -->

过滤器传参 上面的例子 (formatDate 和 formatCurrency) 已经展示了如何传递参数 (format 和 symbol) 来自定义格式化行为。

总结要点

掌握定义方式 ：
- 全局过滤器 ：Vue.filter('name', function(value, ...args) { ... })
- 局部过滤器 ：在组件/实例的 filters: { name: function(value, ...args) { ... } } 中定义。
理解适用场景 ：
- 主要用于纯文本格式化（日期、货币、大小写转换、复数形式、单位换算等）。
- 适用于需要在模板中简洁展示处理结果的情况。
提升代码质量 ：
- 可读性：模板中的过滤器调用清晰表达了数据转换的意图。
- 复用性：相同的格式化逻辑只需定义一次过滤器，即可在多个地方使用。
- 维护性：格式化逻辑集中在过滤器函数中，修改方便。

重要提示： Vue 2 广泛使用过滤器。在 Vue 3 中，官方移除了过滤器语法（|），建议使用计算属性 (computed) 或方法 (methods) 来实现类似的功能，或者使用全局属性/方法 (app.config.globalProperties) 来模拟全局过滤器。因此，在学习 Vue 3 时，请特别注意这个变化。

第一阶段：Vue 基础入门（第 11 天）

Vue 过滤器 (filter)

核心知识点

案例代码

总结要点

Vue 过滤器 (`filter`)