1. 过滤器
过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和 v-bind 属性绑定。
过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用，示例代码如下：
1.1 定义过滤器
在创建 vue 实例期间，可以在 filters 节点中定义过滤器，示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>message 的值是：{{ message | capi }}</p>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
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
}
}
})
</script>
</body>
</html>
1.2 私有过滤器和全局过滤器
在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>message 的值是：{{ message | capi }}</p>
</div>
<div id="app2">
<p>message 的值是：{{ message | capi }}</p>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<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>
</body>
</html>
使用全局过滤器格式化时间
【使用全局过滤器格式化时间】 https://www.bilibili.com/video/BV1zq4y1p7ga?p=66&share_source=copy_web&vd_source=d228985826b563972268952905224139
1.3 连续调用多个过滤器
过滤器可以串联地进行调用，例如：
示例代码如下：
1.4 过滤器传参
过滤器的本质是 JavaScript 函数，因此可以接收参数，格式如下：
示例代码如下：
1.5 过滤器的兼容性
过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了过滤器相关的功能。
在企业级项目开发中：
- 如果使用的是 2.x 版本的 vue，则依然可以使用过滤器相关的功能
- 如果项目已经升级到了 3.x 版本的 vue，官方建议使用计算属性或方法代替被剔除的过滤器功能
具体的迁移指南，请参考 vue 3.x 的官方文档给出的说明：
https://v3.vuejs.org/guide/migration/filters.html#migration-strategy
本文含有隐藏内容，请 开通VIP 后查看