????? vue.js支持在{{}}插值的尾部添加一個(gè)管道符“（|）”對(duì)數(shù)據(jù)進(jìn)行過(guò)濾，經(jīng)常用于格式化文本，比如字母全部大寫、貨幣千位使用逗號(hào)分隔符等等。過(guò)濾的規(guī)則是自定義的，通過(guò)給Vue實(shí)例添加選項(xiàng)filters來(lái)設(shè)置，例如本小節(jié)用來(lái)copy一份實(shí)時(shí)顯示當(dāng)前時(shí)間的示例，可以對(duì)時(shí)間進(jìn)行格式化處理：
直接上代碼
<div id="lmz">//掛載點(diǎn)
??? {{ 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:{//過(guò)濾器
??? 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(){//生命周期鉤子函數(shù)，el掛載到實(shí)例上后調(diào)用
? ? ? ? var that = this;
? ? ? ? this.timer = setInterval(function(){
? ? ? ? ? ? ? ? that.date = new Date();
??? },1000); },
??? beforeDestroy:function(){//生命周期鉤子函數(shù)，實(shí)例銷毀之前調(diào)用
? ? ? ? if(this.timer){
? ? ? ? ? ? ? ? clearInterval(this.timer); }
}
});
</script>
小結(jié)：通過(guò)這個(gè)簡(jiǎn)單的一個(gè)小例子，在熟悉vue基本語(yǔ)法的情況下，我們對(duì)過(guò)濾器有了一個(gè)簡(jiǎn)單的認(rèn)識(shí)，過(guò)濾器應(yīng)當(dāng)用于處理簡(jiǎn)單的文本轉(zhuǎn)換，如果要實(shí)現(xiàn)復(fù)雜的數(shù)據(jù)變換，應(yīng)該使用計(jì)算函數(shù)。
