目錄
過濾器
?HTML寫法：
定義過濾器:
?定義全局過濾器：
過濾器串聯(lián)：
?帶參數(shù)過濾器：
時(shí)間戳轉(zhuǎn)時(shí)間
過濾器
官方地址：過濾器 — Vue.js (vuejs.org)
過濾器是指Vue.js支持在{{}}插值的尾部添加一個(gè)管道符“（|）”對(duì)數(shù)據(jù)進(jìn)行過濾，
經(jīng)常用于格式化文本，比如字母的大寫、貨幣的千位使用、逗號(hào)分隔、轉(zhuǎn)換時(shí)間等?
?HTML寫法：
在雙花括號(hào)中
{{ name | chilema }}在 `v-bind` 中，從2.1.0后?開始支持
<div v-bind:id="rawId | formatId"></div>定義過濾器:
使用filters關(guān)鍵字來定義過濾器
這里定義的過濾器為局部過濾器，在哪定義，在哪使用。
代碼實(shí)例：?
chilema方法中的value參數(shù)是雙花括號(hào)中 | 左邊的值
切記如果return沒寫，瀏覽器中將會(huì)什么都不會(huì)顯示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{name|chilema}}
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
var app=new Vue({
el:"#app",//綁定一個(gè)元素
data() {
return {
name:"張三"
}
},
filters:{
chilema(value){
return value+"，你吃了嗎"
}
}
})
</script>
</html>瀏覽器輸出結(jié)果：
?定義全局過濾器：
?全局的過濾器用的不多，但是根據(jù)不同情況使用
?代碼實(shí)例：?
當(dāng)全局過濾器和局部過濾器重名時(shí)，會(huì)采用局部過濾器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{name|helema}}
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
Vue.filter("helema",function(value){
return value+"，你喝了嗎"
})
var app=new Vue({
el:"#app",//綁定一個(gè)元素
data() {
return {
name:"張三"
}
},
filters:{
chilema(value){
return value+"，你吃了嗎"
}
}
})
</script>
</html>瀏覽器輸出結(jié)果：
過濾器串聯(lián)：
?代碼實(shí)例：?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{name|chilema|helema}}
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
Vue.filter("helema",function(value){
return value+"，你喝了嗎"
})
var app=new Vue({
el:"#app",//綁定一個(gè)元素
data() {
return {
name:"張三"
}
},
filters:{
chilema(value){
return value+"，你吃了嗎"
}
}
})
</script>
</html>解釋：
name的值將作為參數(shù)傳入到chilema中，然后將chilema的結(jié)果傳遞到helema中
最終顯示的是最后的那個(gè)過濾器
?瀏覽器輸出結(jié)果：
?帶參數(shù)過濾器：
{{ name | chilema('arg1', arg2) }}chilema這是有三個(gè)參數(shù)，name會(huì)是他的第一個(gè)參數(shù)，普通字符串?'arg1'?作為第二個(gè)參數(shù)，表達(dá)式arg2的值作為第三個(gè)參數(shù)。
vue代碼：
chilema(value,arg1,arg2){
return value+"，你吃了嗎"
}時(shí)間戳轉(zhuǎn)時(shí)間
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{Mytime | zhuanhuanTime01}}
<br>
{{Mytime | zhuanhuanTime02}}
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
var app = new Vue({
el: '#app',
data() {
return {
Mytime:new Date()
}
},
filters:{
zhuanhuanTime01(value){
var date = new Date(value);
Y = date.getFullYear();
M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) ;
D = date.getDate() ;
h = date.getHours() ;
m = date.getMinutes();
s = date.getSeconds();
console.log(Y+M+D+h+m+s);
return Y+'-'+M+'-'+D+' '+h+':'+m+':'+s;
},
zhuanhuanTime02(value){
var date = new Date(value);
Y = date.getFullYear();
M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) ;
D = date.getDate() ;
h = date.getHours() ;
m = date.getMinutes();
s = date.getSeconds();
console.log(Y+M+D+h+m+s);
return Y+'年'+M+'月'+D+'日 '+h+'時(shí)'+m+'分'+s+'秒';
}
}
});
</script>
</html>瀏覽器輸出結(jié)果：文章來源：http://www.zghlxwxcb.cn/news/detail-641744.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-641744.html
到了這里，關(guān)于Vue過濾器（時(shí)間戳轉(zhuǎn)時(shí)間）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
