过滤器(Filter)常用于文本的格式化。过滤器使用的地方:插值表达式和v-bind属性绑定。过滤器应该添加在JS表达式的尾部,由“管道符”进行调用。
注意:过滤器的本质是一个函数
<!-- 在插值表达式中通过"管道符"调用capitalize过滤器,对message的值进行格式化 -->
<p>{{ message | capitalize }}</p>
<!-- 在v-bind中通过"管道符"调用formatId过滤器,对rawId的值进行格式化 -->
<div v-bind:id="rawId | formatId"></div>
const vm = new Vue({
el: '#app',
data: {
message: 'hello vue.js'
},
filters: { // 过滤器函数必须声明到filters节点之下
capitalize(val){ // 过滤器的形参val,就是管道符前面的值
console.log(val) // 输出的val结果就是data里面的message(在过滤器函数中写入形参就能获取管道符前的要处理的数据)
// val.chartAt(0) 字符串chartAt()方法,括号内接收一个索引,作用是把字符串里面对应索引的字符取出来
const first = val.chartAt(0).toUpperCase() // 字符串的toUpperCase()方法,将字符串转为大写
const other = val.slice(1) // 字符串的slice()方法,从指定索引往后截取字符串
// 强调:过滤器中一定要有一个返回值。而调用过滤器后 页面渲染的值一定是这个返回值
return first + other
}
}
})
私有过滤器和全局过滤器:
- 在vue实例对象vm中,通过filters节点定义的过滤器就是私有过滤器,私有过滤器只能在当前实例中使用
- 独立于每个vm实例之外的过滤器就是全局过滤器(定义在vm实例对象之外)
定义全局过滤器:
// 使用vue.filter()方法
// vue.filter()方法接收两个参数:全局过滤器的名字(字符串) 和 全局过滤器的处理函数function(){}
Vue.filter('capitalize', (str) => { // 形参str就是要处理的数据
return str.chartAt(0).toUpperCase() + str.slice(1)
})
Vue.filter('capitalize', function(str){
const first = str.chartAt(0).toUpperCase()
const other = str.slice(1)
return first + other
})
注意:当全局过滤器和私有过滤器的命名一致时,会调用的是私有过滤器。但是通常情况下使用的是全局过滤器比较多
过滤器函数还可以传递参数
<!-- arg1和arg2是传递给filterA的参数 -->
<p>{{ message | filterA(arg1, arg2) }}</p>
// 在过滤器处理函数的形参列表中
// 第一个参数永远都是"管道符"前面的 待处理的数据
// 第二个参数开始才是调用过滤器函数时传递过来的arg1和arg2参数
Vue.filter('filterA', (msg, arg1, arg2)=>{
// 过滤器处理函数
})