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