一、什么是过滤器?
过滤器提供给我们的一种数据处理方式。过滤器功能不是必须要使用的,因为它所实现的功能也能用计算属性或者函数调用的方式来实现。
二、过滤器声明与使用
过滤器应该被添加在JavaScript 表达式的尾部,由“管道符”进行调用。
过滤器可以用在两个地方:插值表达式和v-bind 属性绑定。
示例:
在 {{ }} 中,通过管道符 " | " 调用 capitalize() ,对message进行格式化。
<div id="app">
<p :title="info | capitalize">{{message | capitalize}}</p>
</div>
<script src="../../lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
message: 'hello vue.js',
info: 'title info',
},
filters: {
capitalize(str) {
// 第一个字母大写,slice(1) 拼接上下标为1之后的字母
return str.charAt(0).toUpperCase() + str.slice(1)
}
}
})
</script>
三、Vue过滤器的分类
1.按照作用范围分类
按照作用范围分类,可以分为全局过滤器和局部过滤器
(1)全局过滤器:通过Vue.filter()方法定义的过滤器,在整个应用程序中都可以使用。
(2)局部过滤器:在Vue组件选项中通过filters属性定义的过滤器,只能在该组件及其子组件中使用(就是上述的案例代码)。
2.按照使用方式分类
按照使用方式分类,可以分为普通过滤器和带参数过滤器
(1)普通过滤器:不带参数的过滤器,可以对数据进行简单的格式化或转换,例如将字符串转换为大写形式,将数字格式化为货币格式等。
这个也就是我们上述代码的例子。
(2)带参数过滤器:带有一个或多个参数的过滤器,可以根据参数的不同实现不同的功能,例如根据参数过滤数组,根据参数指定日期格式等。
除此之外,Vue.js的过滤器还可以按照数据类型进行分类,例如针对字符串、数字、日期、数组等不同的数据类型,提供了不同的过滤器实现。