一.什么是过滤器
过滤器（Filters）是一种用于文本转换的简单方法，用于模板中，以格式化显示的数据。过滤器通常用于以下场景：
- 格式化文本（如日期、数字）
- 转换大写或小写
- 简化长文本
二.过滤器的作用
- 数据格式化：将数据转换为用户友好的格式，例如将日期格式化为特定的日期格式。
- 文本转换：例如，将文本转换为大写或小写，或者进行简单的文本替换。
- 数据筛选：尽管这不是过滤器的主要用途，但它们可以用于简单的数据筛选，例如从数组中过滤出特定项。
三.常见用法
1.定义过滤器
过滤器可以在组件的选项中定义，或者在 Vue 实例的全局范围内定义。
全局过滤器：
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
解释：
Vue.filter('capitalize', function (value) {
// 定义了一个名为 'capitalize' 的全局过滤器。
// Vue.filter 方法接受两个参数：
// 1. 'capitalize' 是过滤器的名称，可以在模板中通过这个名称来使用过滤器。
// 2. 一个函数，这个函数会接收从模板传递过来的值，并对其进行处理。
if (!value) return ''
// 如果传入的 value 是假值（比如 null、undefined、空字符串等），
// 则直接返回一个空字符串。这是为了防止在调用 toUpperCase() 方法时出现错误。
value = value.toString()
// 将其转换为一个字符串。
return value.charAt(0).toUpperCase() + value.slice(1)
// 过滤器的核心功能：
// - value.charAt(0) 获取字符串的第一个字符。
// - toUpperCase() 将第一个字符转换为大写。
// - value.slice(1) 获取除了第一个字符之外的所有字符。
// - 最后，将大写的第一个字符与剩余的字符串片段拼接起来，形成一个新的字符串。
// 结果是原始字符串的首字母大写，其余字母保持原样。
});
局部过滤器：
这个局部过滤器 capitalize 只能在定义它的组件内部使用。
filters: {
capitalize: function (value) {
// 这是定义在组件的 `filters` 选项中的一个过滤器。
// `filters` 是一个对象，其中的每个属性都是一个过滤器函数。
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
如果想在模板中使用这个过滤器，可以像这样：
<template>
<div>
<p>{{ someText | capitalize }}</p>
</div>
</template>
在该例子中，someText 是组件的数据属性，当它通过管道符号 | 传递给 capitalize 过滤器时，它的值会被转换为首字母大写的格式，并显示在 <p> 标签内。
局部过滤器的优势在于它们的作用范围仅限于定义它们的组件，有助于避免全局命名空间的污染，并且使得组件更加模块化和可移植。
2.使用过滤器
在模板中，通过管道操作符 | 使用过滤器。
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 v-bind 中 -->
<div v-bind:id="rawId | formatId"></div>
以下是一些常见的过滤器用法示例：
格式化日期：
Vue.filter('formatDate', function (value) {
if (value) {
return moment(String(value)).format('MM/DD/YYYY')
}
})
在模板中使用：
{{ currentDate | formatDate }}
转换为大写：
Vue.filter('uppercase', function (value) {
return value.toUpperCase()
})
在模板中使用：
{{ 'hello' | uppercase }}
限制文本长度：
Vue.filter('truncate', function (text, length, suffix) {
if (text.length > length) {
return text.substring(0, length) + suffix;
} else {
return text;
}
})
在模板中使用：
{{ longText | truncate(10, '...') }}
3.注意事项
- Vue 3.x 中已经不再推荐使用过滤器，官方建议使用方法或计算属性来替代过滤器。
- 过滤器应该用于简单的文本转换，对于更复杂的数据处理，应该使用计算属性或方法。
- 过滤器是 JavaScript 函数，因此可以接收参数，如上面的
truncate过滤器所示。
Vue 3.x 中不再推荐使用过滤器，如果你正在使用 Vue 3.x，建议采用其他方式来实现类似过滤器的功能。
