vue的过滤器

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

过滤器定义语法示例:

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

 注意:

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

 

过滤器应该被添加在 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.filter('filterA', (msg, arg1, arg2) => { //代码逻辑 })