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;
}
}

注意:
要定义到 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 参数