Vue.js基础-过滤器（filters）

昨天开始接触到VueJS里面的过滤器，反反复复很多遍，总是不得其法，今天终于弄明白了，赶紧写个文档记录一下！

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

<!-- 在花括号中 -->
{{data属性|过滤器名}}

<!-- v-bind表达式 -->
<div class="属性|过滤器名"></div>

定义过滤器有两种方式：

1.通过组件的方式定义在vue实例化内部：

<div class="box">
	<p>{{msg}}</p>
	<p>{{msg|sum}}</p>
	<p>{{msg|produce}}</p>
	<p>{{msg|sum|produce}}</p>
	<p>{{day|produce|sum}}</p>
	<p>{{msg|count(10,20)}}</p>
	<input type="text" v-bind:value="msg|sum">
	<input type="text" v-model="msg">
</div>
<script>
new Vue({
    el:'.box',
    data:{
        msg:1,
	day:6
    },
    filters:{
	sum:function(value){
	    return value+1;
	},
	produce:function(value){
	    return value-2;
	},
	count:function(value,a,b){
	    return value+a+b;
	}
    }
})
</script>

或者在创建 Vue 实例之前定义全局过滤器：

<div class="test">
    <p>{{message | sum}}</p>
    <p>{{message | cal 10 20}}</p>
    <p>{{message | sum | currency }}</p>
    <input type="text" v-bind:id="'list'+ message | change +''">
</div>
<script type="text/javascript">
Vue.filter("sum", function(value) {
    return value + 4;
});
Vue.filter('cal', function(value, begin, xing) {
    return value + begin + xing;
});
Vue.filter("change", {
    read: function(value) {
        return value;
    },
    write: function(newVal, oldVal) {
        console.log("newVal:" + newVal);
        console.log("oldVal:" + oldVal);
        return newVal;
    }
});
new Vue({
    el: ".test",
    data: {
        message: 12
    }
});
</script>

通过上面两个例子可以发现，过滤器函数是通过接收表达式的值 (或之前的操作链的结果) 作为第一个参数（当然表达式的值和操作结果有可能是字符串或者是数字）。例如：

        在上面的第一个例子中，{{msg | sum}}中会将msg作为第一个参数传入sum(value)过滤器函数中，此处的value接收的就是msg的值，然后返回计算的结果。

当然，过滤器也可以串联，但过滤器与过滤器之间不可以冲突。例如：

        在{{day | produce | sum}}中，则会将day作为第一个参数传入produce(value)过滤器函数中，然后将produce过滤器函数返回的值再作为参数传入sum(value)中，最后获取表达式的值。

另外，因为过滤器是JavaScript 函数，所以过滤器也可以接收参数。例如：

        在{{msg | count(10,20)}}中，count()过滤器函数会仍接收msg作为第一个参数，但同时也会接收count中带有的参数，这时 数值10 会作为count函数的第二个参数，数值20 会作为count函数的第三个参数。