过滤器Filters是vue为开发者提供的功能,常用于文本的格式化,过滤器可以用在两个方面:插值表达式和v-bind属性绑定。
过滤器应该被添加在javascript表达式的尾部,由管道符进行调用,
注意:
在双花括号通过管道符调用capitalize过滤器,对message的值进行格式化
<p>{{message | capitalize}}</P>
在v-bind中通过管道符调用formatId过滤器,对rawid的只进行格式化
<div v-bind:id="rawid"|formateid"></div>
过滤器的注意点
1、要定义到filters节点下,本质是一个函数
2、在过滤函数中,一定要由return值
3、在过滤器的形参中,就可以获取到管道符前面待处理的那个值
4、如果全局过滤器和私有过滤器名字一致时,此时按照“就近原则”,调用的是’私有过滤器。’
私有过滤器和全局过滤器
在filters节点下定义的过滤器,称为“私有过滤器”,因为它只能在当前vm实例所控制的el区域内使用,如果希望在多个vue实例之间共享过滤器,则可以按照如下的格式定义全局过滤器
全局过滤器独立于每个vm实例之外
vue.filter()方法接收两个参数:
第一个参数,是全局过滤器的名字
第二个参数,是全局过滤器的“处理函数”
Vue.filter('capitalize',(str) =>{
return str.charAt(0).toUpperCase()+str.slice(1)+'~~})