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
所共享了。