(一)filters過濾器
Vue.js支持在{{}}插值的尾部添加一個管道符“（|）”對數據進行過濾。經常用於格式化文本，比如字符全部大寫，貨幣單位使用逗號分隔，日期形式的轉換等。過濾的規則是自定義的，通過給Vue.js添加選項來設置，格式{{message|filter}}，message為要過濾的對象，filter為過濾條件
如下為一個日期的轉換，把上一篇文章的日期顯示成數字形式比較容易懂修改后如下
<div id='myvue'>
當前時間：{{ date |filters1}} //后面選項filters里的一個過濾函數filters1
</div>
<script src='vue.js'></script> //相對路徑
<script>
var filter=function(value){
return value<10?'0'+value:value; //此過濾函數意思是如果獲得的數字小於10前面就加個0變為兩位數，用於后面對月份、時、分、秒進行過濾
}
var myVue=new Vue({
el:'#myvue',
data:{
date:new Date()
},
filters:{
filters1:function(value){
var date=new Date(value);
var year=date.getFullYear(); //獲取年份
var month=filter(date.getMonth()+1); //獲取月份，getMonth獲取的是0-11，所以獲取的時候要加上1才是真實的月份，並且對月份使用前面的filter進行數字過濾
var day=filter(date.getDay()); //獲取日期
var hour=filter(date.getHours()) //獲取小時
var minute=filter(date.getMinutes()); //獲取分鍾
var second=filter(date.getSeconds()) //獲取秒
return year+'-'+month+'-'+day+'-'+hour+':'+minute+':'+second; //用適當的連接符連接返回所需要的格式
}
},
mounted:function(){
var _this=this;
var timer=setInterval(function(){
_this.date=new Date();
},1000)
console.log(this.date)
},
beforeDestroy:function(){
if(this.timer){
clearInterval(this.timer);
}
}
})
</script>
運行結果如下圖
(二)過濾器串聯
過濾器可以通過兩個管道符進行串聯，進行兩次過濾，格式為{{message|filter1|filter2}},這兩次過濾是傳遞的,先由message經過filter1得到過濾后的值然后作為參數再
傳遞給過濾函數2filter2再次進行過濾最后顯示結果，如將上述代碼修改為以下代碼
<div id='myvue'>
當前時間：{{ date |filters1|filters2}}
</div>
<script src='vue.js'></script>
<script>
var filter=function(value){
return value<10?'0'+value:value;
}
var myVue=new Vue({
el:'#myvue',
data:{
date:new Date()
},
filters:{
filters1:function(value){
var date=new Date(value);
var year=date.getFullYear();
var month=filter(date.getMonth()+1);
var day=filter(date.getDay());
var hour=filter(date.getHours())
var minute=filter(date.getMinutes());
var second=filter(date.getSeconds())
return year+'-'+month+'-'+day+'-'+hour+':'+minute+':'+second;
},
filters2:function(value){
return value.split('-')[0]； //將傳遞過來的參數按‘-’進行分割得到一個數組，然后取數組的第一個值，也就是年份
}
},
mounted:function(){
var _this=this;
var timer=setInterval(function(){
_this.date=new Date();
},1000)
console.log(this.date)
},
beforeDestroy:function(){
if(this.timer){
clearInterval(this.timer);
}
}
})
</script>
結果如下
上面綠色的地方為改動或添加的代碼，此時結果為2019，這說明date經過filters1轉換為數字形式，然后作為過濾函數filters2的參再次進行過濾得到年份
(三)過濾器接受參數
格式{{meaasge|filter('arg1','arg2')}}
這里的字符串arg1和arg2將分別作為傳給過濾函數的第二個第三個參數，因為第一個是數據本身(message)，如下面例子
<div id='myvue'>
成績：{{ grade |filters1(60,80)}}
</div>
<script src='vue.js'></script>
<script>
var myVue=new Vue({
el:'#myvue',
data:{
grade:75
},
filters:{
filters1:function(value1,value2,value3){
return value1<value2?'不及格':(value1>value3?'優秀':'良好') //如果value1小於value2則輸出不及格，否則再比較value1是否大於value3，如果大於則為優秀如果小於則為良好，75為良好
}
}
})
</script>
結果：
所以實參grade和過濾器的形參value1對應，60對應value2,80對應value3
提示:過濾器應當處理簡單的文本轉換，如果要實現更為復雜的數據變換，應該使用計算屬性，如有錯誤請指出，謝謝