Vue_过滤器Filters

• 过滤器(Filters) 是vue为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方:插值表达式和v-bind属性绑定。
• 过滤器应该被添加在JavaScript表达式的尾部，由“管道符"进行调用。
• 过滤器在vue3中已被移除。

私有过滤器

<!-- 在双花括号中通过“管道符"调用capitalize 过滤器，对message 的值进行格式化-->
<p>{{ message | capitalize }}</p> 
<!--在v-bind 中通过"管道符"调用formatId 过滤器，对rawId 的值进行格式化-->
<div v-bind:id="rawId | formatId"></div>

filters: {
//注意:过滤器函数形参中的val， 永远都是“管道符”前面的那个值
    capi(val) {
    //字符串有charAt方法，这个方法接收索引值，表示从字符串中把索引|对应的字符， 获取出来
    // val. charAt(0)
    const first = val. charAt(0). toUpperCase()
    //字符串的slice 方法，可以截取字符串，从指定索引往后截取
    const other = val.slice(1)
    //强调:过滤器中，一定要有一个返回值
    return first + other
    }
}

全局过滤器

//全局过滤器 - 独立于每个vm实例之外
//Vue.filter() 方法接收两个参数:
//第1个参数，是全局过滤器的"名字”
//第2个参数，是全局过滤器的”处理函数”
Vue.filter( 'capitalize', (str) => {
	return str.charAt(0).toUpperCase() + str.slice(1)
})

过滤器的注意点

1. 要定义到filters节点下,本质是一个函数
2. 在过滤器函数中，一定要有return值
3. 在过滤器的形参中，可以获取到"管道符"前面待处理的那个值
4. 如果私有和全局过滤器的名字一样，调用时采取就近原则，使用私有过滤器
5. 可以连续调用多个过滤器，后一个以前一个的返回值为参数
6. 过滤器的本质是函数，可以传参