过滤器

在 vue2.0 之前，是有内置过滤器的，在2.0中已经没有内置的过滤器了，但我们可以自定义过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

即过滤器是用来格式化数据的一个函数。过滤器不会修改原始数据，它的作用是过滤数据，就是对数据进行加工处理并返回处理后的数据，比如做一些数据格式上的修改，状态转换等。

这里的this指向的是window，过滤器无法修改vue实例的数据

<!-- 在双花括号中 -->
{{ message | 过滤器名称 }}
​
<!-- 在 `v-bind` 中 -->
<div v-bind:id="id | 过滤器名称"></div>

<!-- 过滤器的使用 -->
数据 | 过滤器的名字 
数据 | 过滤器的名字(参数1，参数2，...)

<img height="100" :src="item.logoData | base64" alt="">

局部过滤器

你可以在一个组件的选项中定义本地的过滤器：

组件内 filters:{ 过滤器名: fn } fn 内通过 return 返回最终的数据

使用 0

filters: {
  capitalize: function (value) {
    console.log(this) 	// 这里的this指向的是window，过滤器无法操作vue实例的数据
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

在Vue配置对象中增加属性filters,值是一个对象;
filters对象的属性名即是过滤器的名字，属性值是函数;
过滤器函数返回的值即是过滤后要渲染的内容;
过滤器函数接收的第一个参数即是要被过滤的数据
过滤器函数接收的第二个参数开始才是使用过滤器传递的参数
这里的this指向的是window，过滤器无法操作vue实例的数据

data () {
    return {
        msg: 'hello world'
    }
},
//定义私用局部过滤器。只能在当前 vue 对象中使用
filters: {
    dataFormat: (msg, a) => { // msg表示要过滤的数据，a表示传入的参数
        return msg + a;
    }
}
<p>{{ msg | dataFormat('!')}}</p> // 结果: hello world!

全局过滤器

或者在创建 Vue 实例之前全局定义过滤器：所有组件共享

全局 Vue.filter('过滤器名',fn) fn 内通过 return 返回最终的数据

使用 0

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

自定义全局过滤器
Vue.filter('过滤器名称', function(val) { // val表示要被处理的数据
    // 过滤器业务逻辑，要有返回值
})
<div>{{ msg | 过滤器名称 }}</div>
<div v-bind="msg | 过滤器名称"></div>

当全局过滤器和局部过滤器重名时，会采用局部过滤器。

过滤器参数

过滤器本质上是 JavaScript 函数，因此可以接收参数：

过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数

{{ message | capitalize }}
capitalize 过滤器函数将会收到 message 的值作为第一个参数
{{ message | filterA('arg1', arg2) }}
这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。

过滤器函数接收的第一个参数即是要被过滤的数据
过滤器函数接收的第二个参数开始才是使用过滤器传递的参数

过滤器串联

过滤器可以串联

{{ message | filterA | filterB }}

在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。

过滤器顺序

当全局过滤器和局部过滤器名字重复的时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用

一个表达式可以使用多个过滤器，其执行顺序从左往右，前一个过滤器的结果作为后一个过滤器的被处理数据，所以要注意使用顺序

全局注册时是 filter 没有 s ， 而组件过滤器是 filters，是有 s 的，虽然写的时候没有 s 也不报错，但是过滤器是没有效果的。

使用建议

熟悉 vue 的童鞋会知道，过滤器有时候同methods、computed、watch一样可以达到处理数据的目的，但又不能替代它们，因为它不能改变原始值。如果一个过滤器的内部特别复杂，可以考虑把它写成一个计算属性，因为计算属性本身带有缓存，可复用性强，而过滤器一般用来做一些简单的操作。

在实际开发中，全局的过滤器要比局部过滤器使用的更广泛一些，说白了我们为什么要使用过滤器，其实就跟使用函数是一样，把一些方法封装，供其它组件使用，这样调用起来更方便也更快捷。

大家知道全局过滤器是在 main.js 中定义的，但万一项目过大，有多个过滤器，那 main.js 就一堆代码，为了项目模块化，最好是有专门的目录来统一存放这些过滤器，然后把处理函数给抽离出去，放在一个.js文件中，下边通过实例代码展示。

抽离全局过滤器

// lib/vue-filter.js 文件

export default {
	date(t){
		const timer = new Date(t);
		return timer.getFullYear() + "-" +
			(timer.getMonth() + 1).toString().padStart(2, 0)
	},
	currency(v,n=2,type="$"){
		return type+v.toFixed(n);
	}
}

//vue.html 文件
import filters from "./lib/vue-filters.js";
for(let key in filters){
    Vue.filter(key,filters[key])
}