Vue.js（三）：过滤器详解以及应用（对当前时间进行格式化处理）

过滤器是对数据进行过滤和扩展的工具。下面是对它的详细说明：

一、过滤器详解

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化，比如字母全部大写、货币千位使用逗号分隔等。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号“（|）”指示。过滤器可以用在两个地方：双花括号插值和 v-bind表达式 。比如：

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 v-bind 中 -->
<div v-bind:id="rawId | formatId"></div>

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

filters:{
    capitalize:function (val) {
        return val.toUpperCase();
    }

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

Vue.filter('capitalize',function(val) {
        return val.toUpperCase();
    })
new Vue({
//...
})

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

过滤器是 JavaScript 函数，因此可以接收多个参数。过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。比如

<div id="app">
    {{10|toRMB(' 元')}}
</div>

<script>
    var app = new Vue({
        el:'#app',
        data:{},
        method:{},
        filters:{
            toRMB:function (val,type) {
                return '￥'+val+type;
            }
        }
    })
</script>

以上这个例子，toRMB过滤器函数将会收到10作为第一个参数。

过滤器可以串联，也就是说过滤器可以有好几个函数：

<div id = "app">
    {{setence|toCapitalize|addPreSetence}}
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            setence:'Hello world'
        },filters:{
            toCapitalize:function (val) {
                return val.toUpperCase();
            },
            addPreSetence:function (val) {
                return 'The setence is:'+val;
            }
        }

    })
</script>

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

二、应用举例

Q：建立一个时间过滤器，把一个时间变量变成一个合符要求的时间格式 。

<div id="app">
    {{data|formatDate}}
</div>

<script src="../plugin/vue.js"></script>
<script>
    //在月份、日期、小时等小于10是前面补0
    var padDate = function (value) {
        return value<10 ? '0'+value : value;
    };
    var app = new Vue({
        el:'#app',
        data:{
            data:new Date()
        },
        filters:{
            formateDate:function (value) {//这里的value就是需要过滤的数据
                var date = new Date(value);
                var year = date.getFullYear();
                var month = padDate(date.getMonth()+1);
                var day = padDate(date.getDate());
                var hours = padDate(date.getHours());
                var minutes = padDate(date.getMinutes());
                var seconds = padDate(date.getSeconds());
                //将整理好的数据返回出去
                return year+'-'+month+'-'+day+' ' +hours+':'+minutes+':'+seconds;
            }
        },
        mounted:function(){
            var _this = this;//声明一个变量指向Vue实例this，保证作用域一致
            this.timer = setInterval(function () {
                _this.date = new Date();//修改数据date
            },1000);
        },
        beforeDestroy:function () {
            if(this.timer){
                clearInterval(this.timer);//在Vue实例销毁前，消除我们的定时器
            }
        }
    })
</script>

三、注意

过滤器应当用于简单的文本转换，如果要实现更为复杂的数据交换，应当使用计算属性，后面我们会详细介绍。