过滤器定义语法示例:
注意:
- filters: {
- //注意: 过滤器函数形参中的val 永远都是"管道符"前面的那个值
- capi(val) {
- //过滤器中一定要有一个返回值(return)
- //字符串有个 charAt 方法 这个方法接受索引值 表示从字符串中把索引对应的字符获取过来
- const first = val.charAt(0).toUpperCase()
- //字符串的 slice 方法 可以截取字符串 从指定索引往后截取
- const other = val.slice(1)
- //拼接字符串
- return first + other;
- }
- }
要定义到 filters 节点下,本质是一个函数
在过滤器函数中,一定要有一个返回值(return)
在过滤器的形参中,就可以获取到"管道符"前面待处理的值
如果全局过滤器和私有过滤器名字一致,则按照"就近原则",调用的是私有过滤器
过滤器应该被添加在 JavaScript 表达式的尾部,由 "管道符" 进行调用,示例代码如下:
- <!-- 在 "{{}}" 中通过"管道符"调用 capitalize 过滤器,对 message 的值进行格式化 -->
- <p>{{ message | capitalize }}</p>
私有过滤器和全局过滤器
- <!-- 在 "v-bind" 中通过"管道符"调用 formatId 过滤器,对 rawId 的值进行格式化 -->
- <div v-bind="rawId | formatId"></div>
在 filters 节点下定义的过滤器,成为"私有过滤器",因为它只能在当前vm实例所控制的el区域内使用
如果希望在多个vue实例之间共享过滤器,则可以按照如下的格式定义全局过滤器:
- //全局过滤器 - 独立于每个 vm 实例之外
- //Vue.filter() 方法接受两个参数:
- // 第一个参数: 全局过滤器的名字
- // 第二个参数: 全局过滤器的"处理函数"
- Vue.filter('capitalize', (str) => {
- return str.charAt(0).toUpperCase() + str.slice(1) + '~~'
- })
连续调用多个过滤器
过滤器可以串联的进行调用,例如:
- <!-- 把 message 的值 交给 filterA 进行处理 -->
- <!-- 把 filterA 处理的结果 交给 filterB 进行处理 -->
- <!-- 把 filterB 处理的结果 作为最终值渲染到页面上 -->
- {{ message | filterA | filterB }}
过滤器传参
过滤器的本质是JavaScript函数,因此可以接收参数,格式如下:
//过滤器处理函数的形参列表中
- <!-- arg1 和 arg2 是传递给 filterA的参数 -->
- <p>message的值是: {{ message | filterA(arg1, arg2) }}</p>
// 第一个参数: 永远都是:管道符"前面待处理的值
// 从第二个参数开始 才是调用过滤器时传递过来的 arg1 和 arg2 参数
![[Vue warn]: Error in render: “TypeError: Cannot read property ‘ xxx ‘ of undefined“报错原因和解决](https://www.pweb123.com/uploadfile/2022/0903/thumb_240_180_20220903053548716.jpg)
文章点评