开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情
1.过滤器
过滤器(Filters)是 VUE 为开发者提供的功能,常用于文本的格式化,过滤器可以用在两个地方;插值表达式和v-bind属性绑定 过滤器应该被添加在 JavaScript 表达式的尾部,由 "管道符"进行调用,示例代码如下：
<!-- 在双花括号中通过 "管道符" 调用 capitalize 过滤器,对 message 的值进行格式化>
<p>{{ message | capitalize }}</p>
<!-- 在 v-bind 中通过 "管道符" 调用 formatID 过滤器,对 rawID 的值家安行格式化>
<div v-bind:id="rawId | formatId"></div>
1-1. 定义过滤器
在创建 vue 实例期间,可以在 filters节点 中定义过滤器,示例代码如下：
const vm=new Vue({
el:'#app',
data:{
message:'hello vue.js',
info:'title info'
},
filters:{ // 在 filters 节点下定义"过滤器"
capitalize(str){ // 把首字母转为大写的过滤器
return str.charAt(0).toUpperCase()+str.slice(1)
}
}
})
1-2. 私有过滤器和全局过滤器
在 filters 节点下定义的过滤器,称为"私有过滤器",因为它只能在当前 vm 实例所控制的 el 区域内使用。如果希望在多个 vue 实例之间共享过滤器,则可以按照如下的格式定义全局过滤器
// 全局过滤器 - 独立于每个 vm 实例之外
// vue.filter() 方法接收两个参数:
// 第一个参数,是全局过滤器的 "名字"
// 第二个参数,是全局过滤器的 "处理函数"
Vue.filter('capitalize',(str)=>{
return str.charAt(0).toUpperCase() + str.slice(1) + '--'
})
1-3. 连续调用多个过滤器
过滤器可以串联地进行调用,例如：
// 把 message 的值,交给 filterA 进行处理
// 把 filterA 处理的结果,再交给 filterB 进行处理
// 最终把 filterB 处理的结果,作为最终的值渲染到页面上
{{ message | filterA | filterB }}
1-3. 连续调用多个过滤器(示例代码)
<!-- 串联词用多个过滤器 -->
<p>{{ text | capitalize | maxLength }}</p>
// 全局过滤器 - 首字母大写
Vue.filter('capitalize',(str)=>{
return str.charAt(0).toUpperCase() + str.slice(1) + '~~'
})
// 全局过滤器 - 控制文本的最大长度
Vue.filter('maxLength',(str)=>{
if(str.length <= 10 ) return str
return str.alice(0,11) + '...'
})
1-4. 过滤器传参
过滤器的本质是 JavaScript函数,因此可以接收参数,格式如下：
// arg1 和 arg2 是传递给 filterA 的参数
<p>{{ message | filterA(arg1,arg2)}}</p>
// 过滤器处理函数的形参列表中
// 第一个参数：永远都是 "管道符" 前面待处理的值
// 第二个参数开始：才是调用过滤器时候传递过来的 arg1 和 arg2 参数
Vue.filter('filterA',(msg,arg1,arg2)=>{
// 过滤器代码逻辑.....
})
1-4. 过滤器传参(示例代码如下)
<!-- 调用 maxLength 过滤器时传参 -->
<p>{{ text | capitalize | maxLength(5) }}</p>
// 全局过滤器 - 首字母大写
Vue.filter('capitalize',(str)=>{
return str.charAt(0).toUpperCase() + str.slice(1) + '~~'
})
// 全局过滤器 - 控制文本的最大长度
Vue.filter('maxLength',(str,len = 10) => {
if(str.length <= len ) return str
return str.alice(0,len) + '...'
})
2. 过滤器的兼容性
- 过滤器仅在 vue2.X 和 vue1.X 中受支持, 在vue3.x版本中剔除了过滤器相关的功能
