Vue中的自定義過濾器
在Vue中並不是所有的系統過濾器都能夠滿足我們的需求，因此，為了方便起見，Vue允許開發人員自定義自己的過濾器。
自定義私有過濾器
- 關鍵字：
filters - 作用：
當我們在建立的Vue（new Vue({})）內部使用關鍵字filters所建立的過濾器時，由於其作用範圍在該Vue的el關鍵字所指定的DOM內，因此我們將其稱之為私有過濾器，在建立自定義過濾器時用法與data關鍵字相似，都是類似於下面的形式：
filters:{
key (param) {}
}
其中key是自定義過濾器的方法名，而param則是自定義過濾器的引數，其中param引數只能來源於過濾器|
原始碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue</title> </head> <body> <div id="app"> 原始時間：<br> {{time}} <hr> 格式化後的時間：<br> {{time | timefmt}} </div> </body> <!--1、匯入Vue的js檔案 --> <script src="../../../js/vue/vue/1.0/vue.js"></script> <script type="application/javascript"> var vm = new Vue({ el:'#app' ,data:{ time:new Date() } ,filters:{ timefmt(param) { //過濾器的邏輯：將input的值格式化成yyyy-MM-dd HH:mm:ss的形式 var res = ''; var year = param.getFullYear(); var month = param.getMonth() + 1; var day = param.getDate(); var hour = param.getHours(); var minite = param.getMinutes(); var second = param.getSeconds(); //將其拼接成格式化後的字串 res = year + '-' + month + '-' + day + ' ' + hour + ':' + minite + ':' + second; return res; } } }); </script> </html>
結果
分析
上面的第一個為js所建立的原始時間，該時間基本上不方便與人們去識讀，因而我們一般情況下需要對該時間物件進行格式化操作。
方法二是格式化後的時間，其在filters關鍵字的作用域內建立一個名為timefmt的函式，該函式傳入一個param，該param就是我們在time中的值，因而我們直接將其拿過來就可以進行相應的格式化操作，最後通過return返回格式化後的結果即可。
自定義全域性過濾器
- 關鍵字：
filter - 作用：
建立全域性過濾器。該建立的全域性過濾器可以被多個Vue物件重複使用，而無需在Vue物件內部再重複床架，因而其大大擴充套件了Vue自定義過濾器的作用範圍。
-
語法：
Vue.filter(String ,Function)
這裡的Vue無需建立，其應該放在所有的Vue物件的最前面。在filter()呼叫方法中需要傳遞兩個引數，第一個為自定義全域性過濾器的名稱，第二個為自定義過濾器的函式體。
原始碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
</head>
<body>
<div id="app1">
Vue物件vm1格式化後的時間<br>
{{time | timefmt}}
</div>
<hr>
<div id="app2">
Vue物件vm2格式化後的時間<br>
{{time | timefmt}}
</div>
</body>
<!--1、匯入Vue的js檔案 -->
<script src="../../../js/vue/vue/1.0/vue.js"></script>
<script type="application/javascript">
//定義一個名稱為timefmt的全域性過濾器
Vue.filter('timefmt',function(param){
//過濾器的邏輯：將input的值格式化成yyyy-MM-dd HH:mm:ss的形式
var res = '';
var year = param.getFullYear();
var month = param.getMonth() + 1;
var day = param.getDate();
var hour = param.getHours();
var minite = param.getMinutes();
var second = param.getSeconds();
//將其拼接成格式化後的字串
res = year + '-' + month + '-' + day + ' ' + hour + ':' + minite + ':' + second;
return res;
});
//Vue物件2
var vm1 = new Vue({
el:'#app1'
,data:{
time:new Date()
}
});
//Vue物件1
var vm2 = new Vue({
el:'#app2'
,data:{
time:new Date()
}
});
</script>
</html>
結果
分析
從上面的程式碼中，我們可以看出，Vue物件vm1監管的DOM元素為app1，而Vue物件vm2監管的DOM元素為app1。其中我們並沒有在vm1與vm2中建立任何的自定義過濾器，但是在頁面的展示結果中，我們看到其都可以將當前時間物件格式化成時間字串，這說明我們自定義的全域性過濾器成功的被vm1與vm2所共享了。