冇事来学系--Vue2.0过滤器

---

theme: scrolls-light

「这是我参与11月更文挑战的第19天，活动详情查看：2021最后一次更文挑战」。

过滤器(Filter)

过滤器(Filter)常用于文本的格式化。过滤器使用的地方：插值表达式和v-bind属性绑定。过滤器应该添加在JS表达式的尾部，由“管道符”进行调用

注意：过滤器的本质是一个函数 

```js

{{ message | capitalize }}

```

```js 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 }) ```

注意：当全局过滤器和私有过滤器的命名一致时，会调用的是私有过滤器。但是通常情况下使用的是全局过滤器比较多

---

```js 过滤器函数还可以传递参数

{{ message | filterA(arg1, arg2) }}

```

js // 在过滤器处理函数的形参列表中 // 第一个参数永远都是"管道符"前面的 待处理的数据 // 第二个参数开始才是调用过滤器函数时传递过来的arg1和arg2参数 Vue.filter('filterA', (msg, arg1, arg2)=>{ // 过滤器处理函数 })