第一章：vue.js-过滤器（基础篇）

      vue.js支持在{{}}插值的尾部添加一个管道符“（|）”对数据进行过滤，经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔符等等。过滤的规则是自定义的，通过给Vue实例添加选项filters来设置，例如本小节用来copy一份实时显示当前时间的示例，可以对时间进行格式化处理：

直接上代码

<div id="lmz">//挂载点

    {{ date | formatDate }}

</div>

<script>

var parseDate = function(value){

     return value<10?0+value:value;

}

var lmz= new Vue({

    el:"#lmz",

    data:{

        date:new Date()

    },

    filters:{//过滤器

    formateDate:function(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 minu = padDate(date.getMinutes());

        var seconds = padDate(date.getSeconds());

        return year+"-"+month+"-"+day+hours+"-"+minu+"-"+seconds;

        }

    },

    mounted:function(){//生命周期钩子函数，el挂载到实例上后调用

        var that = this;

        this.timer = setInterval(function(){

                that.date = new Date();

    },1000); },

    beforeDestroy:function(){//生命周期钩子函数，实例销毁之前调用

        if(this.timer){

                clearInterval(this.timer); }

}

});

</script>

小结：通过这个简单的一个小例子，在熟悉vue基本语法的情况下，我们对过滤器有了一个简单的认识，过滤器应当用于处理简单的文本转换，如果要实现复杂的数据变换，应该使用计算函数。

下一章：vue.js-指令与事件（基础篇）