Vue 过滤器

什么是过滤器？

过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。

在哪使用？

1. 双花括号插值
2. v-bind表达式

//在双花括号中
<div>{{数据属性名称 | 过滤器名称}}</div>
<div>{{数据属性名称 | 过滤器名称(参数值)}}</div>

//在 v-bind 中
<div v-bind:id="数据属性名称 | 过滤器名称"></div>
<div v-bind:id="数据属性名称 | 过滤器名称(参数值)"></div>

全局过滤器

过滤器要在new Vue实例前注册全局的

<div id="app">
	<p>{{ massage | globalFilter }}</p> // massage对应data中的massage
</div>

<script>
//globalFilter过滤器名称， function处理函数，val就是massage
    Vue.filter('globalFilter', function (val) {
        return val + '点个赞叭'
    })
    var app = new Vue({
        el: '#app',
        data: {
            massage: '秃秃'
        }
    })
</script>

输出结果：

局部过滤器（组件过滤器）

在 Vue 实例的 filters 属性对象中，可以定义局部过滤器，该过滤器只能在该 Vue 实例中使用。注意，局部过滤器在与全局过滤器重名时，会优先使用局部过滤器。
　
在组件页面的vue实例中写

<div id="app">
	<input type="text" v-model="msg">
	//capitalize是第一个过滤器，filterA是第二个过滤器
	<p>{{ msg | capitalize | filterA }}</p>
</div>

<script>
    var app = new Vue({
        el: '#app',
        filters: {
            capitalize: function (val) { //执行第一个过滤器
                if (!val) {
                    return "";
                } else {
                    val = val.toString()
                    return val.charAt(0).toUpperCase() + val.slice(1)//获取[0]字符串，转成大写，后边拼接从[1]开始的内容
                }
            },
            filterA: function (val) { //执行第二个过滤器
                if (!val) {
                    return "";
                } else {
                    val = val.toString()
                    return val + '（我是第二个过滤器加的内容哦~）'
                }
            }
        },
        data: {
            msg: 'hello world',
        }
    })
</script>

注意

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

使用方法

（一）在双大括号中用

（可以参考局部过滤器例子）
如果想写多个过滤器就往后拼接

{{ msg | capitalize | filterA }}

上述代码中msg作为参数返回给capitalize函数，而capitalize函数的返回值作为filterA函数的参数，最终结果显示的是filterA函数的返回值

（二）在双大括号中用

{{ msg | filterA('arg1',arg2) }}

上述代码中filterA第一个参数是msg，依次是arg1，arg2

<div>{{ '2018' | filterA('07','17') }}</div>

filters:{
	filterA:function(val,arg1,arg2){
		return val + '-' + arg1 + '-' + arg2
	}
}
//结果： 2018-07-17

（三）在双大括号中用

{{ 'a','b' | filterB }}

上述代码表示’a’和’b’分别作为参数传给filterB

<div>结果：{{ 'Hello','World' | filterB }}</div>

filters:{
	filterB:function(value1,value2){
		return value1 + ' ' + value2
	}
}
//结果： Hello World