介紹
類似于自定義指令，可以用全局方法 Vue.filter() 注冊一個自定義過濾器，它接收兩個參數：過濾器 ID 和過濾器函數。過濾器函數以值為參數，返回轉換后的值
正文
1.系統過濾器
json lowercase uppercase filterBy 注意點：在Vue2.0中已經將系統過濾器給移除了
{{ msg | json }}-json格式
{{ msg | lowercase }} -小寫
{{ msg | uppercase }}-大寫
filterBy -管道 見前面品牌管理案例-過濾器
2.自定義過濾器
- 私有過濾器 ：定義在 VM中的filters對象中的所有過濾器都是私有過濾器
私有過濾器的弊端是：在多個VM中不能共享，會造成代碼的冗余，將來維護成本高
<body>
<div id="app">
{{ time | datefmt}}
</div>
<script>
new Vue({
el:'#app',
data:{
time:new Date()
},
filters:{
//定義在 VM中的filters對象中的所有過濾器都是私有過濾器
datefmt:function(input,str,s1){
var date = new Date(input);
var year = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
//輸出： yyyy-mm-dd
var fmtStr = year+'-'+m +'-'+d;
return fmtStr; //輸出結果
}
}
});
- 全局過濾器
<div id="app">
{{ time | datefmt }}
</div>
<script>
//1.0 定義全局過濾器
Vue.filter('datefmt',function(input){
var date = new Date(input);
var year = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
//輸出： yyyy-mm-dd
var fmtStr = year+'-'+m +'-'+d;
return fmtStr; //輸出結果
});
new Vue({
el:'#app',
data:{
time:new Date()
}
});
它接收兩個參數：過濾器 ID 和過濾器函數
<!-- 'abc' => 'cba' -->
<span v-text="message | reverse"></span>
Vue.filter('reverse', function (value) {
return value.split('').reverse().join('')
})
過濾器函數可以接收任意數量的參數：
參數要引號
<!-- 'hello' => 'before hello after' -->
<span v-text="message | wrap 'before' 'after'"></span>
Vue.filter('wrap', function (value, begin, end) {
return begin + value + end
})
