vue的过滤器–过滤器定义语法示例

过滤器(Filters)是vue为开发者提供的功能,常用于文本的格式化,过滤器可以用在两个地方: 插值表达式 和 v-bind属性绑定

过滤器定义语法示例:

1. filters: {
2. //注意: 过滤器函数形参中的val 永远都是”管道符”前面的那个值
3. capi(val) {
4.   //过滤器中一定要有一个返回值(return)
5.   //字符串有个 charAt 方法 这个方法接受索引值 表示从字符串中把索引对应的字符获取过来
6.   const first = val.charAt(0).toUpperCase()
7.   //字符串的 slice 方法 可以截取字符串 从指定索引往后截取
8.   const other = val.slice(1)
9.   //拼接字符串
10.   return first + other;
11. }
12. }

注意:

要定义到 filters 节点下,本质是一个函数
在过滤器函数中,一定要有一个返回值(return)
在过滤器的形参中,就可以获取到”管道符”前面待处理的值
如果全局过滤器和私有过滤器名字一致,则按照”就近原则”,调用的是私有过滤器

过滤器应该被添加在 JavaScript 表达式的尾部,由 “管道符” 进行调用,示例代码如下:

1. <!– 在 “{{}}” 中通过“管道符”调用 capitalize 过滤器,对 message 的值进行格式化 –>
2. <p>{{ message | capitalize }}</p>

1. <!– 在 “v-bind” 中通过“管道符”调用 formatId 过滤器,对 rawId 的值进行格式化 –>
2. <div v-bind=“rawId | formatId”></div>

私有过滤器和全局过滤器
在 filters 节点下定义的过滤器,成为”私有过滤器”,因为它只能在当前vm实例所控制的el区域内使用

如果希望在多个vue实例之间共享过滤器,则可以按照如下的格式定义全局过滤器:

1. //全局过滤器 – 独立于每个 vm 实例之外
2. //Vue.filter() 方法接受两个参数:
3. //    第一个参数: 全局过滤器的名字
4. //    第二个参数: 全局过滤器的”处理函数”
5. Vue.filter(‘capitalize’, (str) => {
6.     return str.charAt(0).toUpperCase() + str.slice(1) + ‘~~’
7. })

连续调用多个过滤器
过滤器可以串联的进行调用,例如:

1. <!– 把 message 的值 交给 filterA 进行处理 –>
2. <!– 把 filterA 处理的结果 交给 filterB 进行处理 –>
3. <!– 把 filterB 处理的结果 作为最终值渲染到页面上 –>
4. {{ message | filterA | filterB }}

过滤器传参
过滤器的本质是JavaScript函数,因此可以接收参数,格式如下:

1. <!– arg1 和 arg2 是传递给 filterA的参数 –>
2. <p>message的值是: {{ message | filterA(arg1, arg2) }}</p>

//过滤器处理函数的形参列表中
//    第一个参数: 永远都是:管道符”前面待处理的值
//    从第二个参数开始 才是调用过滤器时传递过来的 arg1 和 arg2 参数