今天我们来一块学习一下Vue中的过滤器。查看官网发现，Vue之前封装的一些过滤器现在已经是失效，后期大家在开发过程中用到过滤器的时候都需要自己进行定义哦，这样也好，可以避免自定义的过滤器和Vue之前封装的过滤器冲突，造成一些不必要的麻烦。
什么是过滤器
什么是过滤器呢，本质上都是函数，其作用在于用户输入数据后，它能够进行处理，并返回一个数据结果。Vue.js过滤器使用时，用管道符(|)进行连接。
示例代码如下：
{{'helloworld' | uppercase }}
//uppercase 这个过滤器已经失效，使用的话， 需要自己封装过滤器都有哪些使用方式
Mustache风格
具体代码如下：
{{'helloworld' | uppercase }}
//uppercase 这个过滤器已经失效，使用的话， 需要自己封装在绑定指定的表达式后调用
具体代码如下：
<span v-text="name | uppercase"></span>表达式的值可以根据用户的输入来动态改变，也可以像helloworld一样采用固定值
过滤器的组合使用
在开发过程中有时存在多个过滤器组合使用的情况，具体代码如下：
{{message | filterA | filterB}}Vue.js支持链式调用，上一个过滤器的输出结果可以作为下一个过滤器的输入。
过滤器带参数使用
由于过滤器本质是一个javaScript函数，因此过滤器也是可以接收参数的，具体代码格式如下：
{{message | filterA('arg1',arg2)}}这里，filterA 被定义为接收三个参数的过滤器函数。其中message的值作为第一个参数，字符串'arg1'作为第二个参数，表达式arg2的值作为第三个参数。这里有个地方需要注意下就是带引号的参数会被当作是字符串处理，而不带引号的参数会被当作数据属性名来处理。
自定义过滤器
重点！重点！重点！ 自定义过滤器才是重点哦。在Vue.js中也存在一个全局函数Vue.filter用于构造过滤器。具体代码如下：
Vue.filter(ID,function(){})该函数接受两个参数，其中第一个参数为过滤器ID（唯一标识符），第二个参数作为具体的过滤器函数。过滤器函数要有入参和返回值哦。
单个参数的过滤器
注册一个名为reverse的过滤器，实现字符串反转输出。具体代码入下：
结合helloworld项目，我把代码写在了main.js文件中
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
Vue.filter('reverse',function(value){
return value.split('').reverse().join('');
})//关键代码
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
运行效果如下图所示：
大家可以看到字符串实现了反转输出。
多参数的过滤器
注册一个名为sum的过滤器函数，具体代码如下：
Vue.filter('sum',function(value1,value2){
return value1 + value2
})<template>
<div>
<span>num1:</span>
<span>{{num1}}</span>
<br>
<span>total</span>
<span>{{total | sum(num1)}}</span>
<br>
</div>
</template>
<script>
export default{
name:'HelloWorld',
data(){
return {
num1:8,
total:5
}
}
}
</script>执行结果如下图所示：
我们可以根据之前的定义多参数过滤器函数的两个参数分别是total自身和num1
结果刚好是5+8=13
双向过滤器
在实际的开发过程中，我们有时需要将数据进行进行某种转换后展示出来，另外对于用户输入的数据，也需要一定的转换操作来进行保存操作。举个例子，比如我们在页面上展示手机号码或者银行卡号等，往往需要按照一定的规则加入空格方便我们记忆。同时在对数据处理事也需要自动生成的空格给过滤掉，这样就需要我们用到双向过滤器。具体代码如下：
Vue.filter('phoneDisplay',function(value){
read:function(value){
//为手机号码添加空格
//todo
return newValue
},
write:function(value){
//为手机号码去除空格
//todo
return newVlue
}具体内部实现，今天就不在这里贴出来了，后续补齐一下。
动态参数
如果过滤器参数没有用引号抱起来，则它会在当前vm作用域内动态计算。此外，过滤器函数的this 始终指向调用它的vm，代码示例如下：
自定义过滤器注意事项
（1）需要给过滤器指定一个唯一标识符，如果用户自定义的过滤器和Vue.js内置的过滤器冲突，那么Vue.js内置的过滤器将会被覆盖；如果后注册的过滤器和之前的过滤器冲突，则之前注册的过滤器会被覆盖。
（2）过滤器函数的作用是输入表达式的值，经过处理后输出。因此定义的函数最好可以返回有意义的值。函数没有return语句不会报错，但是这样的过滤器没有意义。
自定义过滤器的书写位置
第一种全局书写方法如下：
Vue.filter('capitalize',function(value){
if (!value && value !== 0) {
return '';
}
value = value.toString()
return value.charAt(0).toLocaleUpperCase() + value.slice(1)
})第二种的写在实例中的书写方法如下：
var demo = new Vue({
el:'#demo',
data:{},
filters:{
capitalize:function(value){
if (!value && value !== 0) {
return '';
}
value = value.toString()
return value.charAt(0).toLocaleUpperCase() + value.slice(1)
}})两种本质上并无区别，但是采用Vue.filter时，需要在实例化Vue对象前定义，否则自定义的filter将不起作用。但是全部注册的过滤器有效范围更广，而在实例中书写的过滤器只在该实例内有效果
常用过滤器实现代码：
- capitalize 首字母大写过滤器函数，具体实现如下：
Vue.filter('capitalize',function(value){
if (!value && value !== 0) {
return '';
}
value = value.toString()
return value.charAt(0).toLocaleUpperCase() + value.slice(1)
})- uppercase 字符全部转换为大写的过滤器函数，具体实现如下：
Vue.filter('uppercase',function(value){
return(value) ? value.toString().toLocaleUpperCase() : ''
})- lowercase 字符全部转换为小写的过滤器函数，具体实现如下：
Vue.filter('lowercase',function(value){
return (value) ? value.toString().toLocaleLowerCase() : ''
})
更多优质文章，可以微信扫码关注：
