过滤器(Filter)
过滤器(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)=>{ // 过滤器处理函数 })
