vue的过滤器
注意vue的过滤器只适用于vue2,并不适用于vue3
1.过滤器的定义
过滤器(filters)是为vue为开发者提供的功能,常用于文本的格式化,过滤器可以用在两个地方:插值表达式和v-bind属性绑定里面。
过滤器应该添加在Javascript表达式的尾部,由**“管道符 | ”**进行调用,示例代码如下:
<!--在双花括号中通过“管道符”调用capitalize过滤器,对message的值进行格式化(也就是message作为参数传递给capitalize函数,函数都有返回值,所以双花括号返回的值是函数的值)-->
<p>{{ message | capitalize }}</p>
<!-- 在v-bind中通过“管道符”调用formatId过滤器,对rawId的值进行格式化-->
<div v-bind:id="rawId | formatId"></div>
2. 过滤器的注意点
- 要定义到filters节点下,本质是一个函数
- 在过滤器函数中,一定要有return
- 在过滤器的形参中,就可以获取到管道符前面的参数
3.示例
<div id="app">
<p>message的值是:{{ message | capi}}</p>
</div>
<script>
const vm = new Vue({
el : '#app',
data:{
message:'hello vue.js'
},
//过滤器函数必须被定义到filters节点之下;过滤器本质上是一个函数
filters:{
//过滤函数的形参val 代表的都是 | 前面的值
capi(val){
//字符串有charAt方法,这个方法接收索引值,表示从字符串中把索引对应的字符,获取出来
const first = val.charAt(0).toUpperCase();
//字符串的slice方法,可以截取字符串,从指定索引往后截取
const other = val.slice(1)
// 强调过滤器中,一定要有一个返回值
return first+ other;
}
}
})
</script>
4. 私有过滤器和全局过滤器
在filters节点下定义的过滤器,成为“私有过滤器”,因为它只能当前vm实例所控制的el区域内使用。如果希望在多个vue实例之间共享过滤器,则可以按照如下的格式定义全局过滤器。
全局过滤器一定要写在vue实例之前
// 全局过滤器——独立于每个vm实例之外
//vue.filter()方法接收两个参数
//第1个参数,是全局过滤器的“名字”
//第2个参数,是全局过滤器的“处理函数”
vue.filter('capi',(str)=>{
return str.charAt(0).toUpperCase() + str.slice(1) + '~~'
})
5. 私有过滤器和全局过滤器的特点
全局过滤器一定要放在vue的实例前面
- 全局过滤器和私有过滤器根据 “就近原则” ,举例:如果某个vue实例中内部已定义filters, 则不会调用全局过滤器。
<div id="app">
<p>message的值是:{{ message | capi}}</p>
</div>
<div id="app2">
<p>message的值是:{{ message | capi}}</p>
</div>
<script>
Vue.filter('capi',(str)=>{
//字符串有charAt方法,这个方法接收索引值,表示从字符串中把索引对应的字符,获取出来
const first = str.charAt(0).toUpperCase();
//字符串的slice方法,可以截取字符串,从指定索引往后截取
const other = str.slice(1)
// 强调过滤器中,一定要有一个返回值
return first+ other + '~~~';
})
const vm = new Vue({
el : '#app',
data:{
message:'hello vue.js'
},
//过滤器函数必须被定义到filters节点之下;过滤器本质上是一个函数
filters:{
//过滤函数的形参val 代表的都是 | 前面的值
capi(val){
//字符串有charAt方法,这个方法接收索引值,表示从字符串中把索引对应的字符,获取出来
const first = val.charAt(0).toUpperCase();
//字符串的slice方法,可以截取字符串,从指定索引往后截取
const other = val.slice(1)
// 强调过滤器中,一定要有一个返回值
return first+ other;
}
}
})
const vm2 = new Vue({
el : '#app2',
data:{
message:'hug.js'
}
})
6.过滤器的其他用法
1.过滤器传参—— 过滤器的本质是Javascript函数,因此可以接受参数,格式如下:
<!--arg1 和 arg2 是传递给 filterA 的参数-->
<p>{{ message | filterA (arg1,arg2) }}</p>
//过滤器处理函数的形参列表中:
//第一个参数:永远都是”管道符“前面待处理的值
//从第二个参数开始,才是调用过滤器时传递过来的arg1 和 arg2 参数
Vue.filter('filterA',(msg,arg1,arg2)=>{
//过滤器的代码逻辑
})
- 连续调用多个过滤器
<!-- 把message的值,交给dateFormat进行处理 -->
<!-- 把dateFormat处理的结果,再交给后面处理 -->
<!-- 最终把结果作为最终值渲染到页面上 -->
<td> {{ item.time | dateFormat | xxx | yyy | zzz }} </td>
资料整理来自于:黑马程序员