web前端vue filter 過(guò)濾器

vue的過(guò)濾器通常用在一些常見(jiàn)的文本格式化，過(guò)濾器可以用在兩個(gè)地方：雙花括號(hào)插值和 v-bind 表達(dá)式。

比如給價(jià)格自動(dòng)加上中文的錢(qián)的字符“￥”或者是給一個(gè)時(shí)間段或（時(shí)間戳）相互之間的轉(zhuǎn)換過(guò)濾。

在javascript和jquery的年代！時(shí)間段的顯示或者是提交，都是要在顯示的時(shí)候要轉(zhuǎn)換下或者提交的時(shí)候轉(zhuǎn)換下，這樣就有點(diǎn)繁瑣了（個(gè)人用了vue后的感覺(jué)繁瑣了）。

不多說(shuō)直接看例子如下：

filter定義的過(guò)濾器可以局部，可以全局的下面就直接說(shuō)全局的

老樣子還是等先注冊(cè)一個(gè)全局的過(guò)濾器關(guān)鍵字（filter）

全局的注冊(cè)過(guò)濾器是在main.js這個(gè)文件里，當(dāng)然也可以單獨(dú)的一個(gè)js文件里

Vue.filter('dateconversion', function (value) { // 一個(gè)時(shí)間戳轉(zhuǎn)正常的過(guò)濾器
 let date = new Date(value) // nuw 一個(gè)時(shí)間
 let getHours // 小時(shí)
 let getMinutes // 分
 if(date.getHours() < 10){getHours = "0"+date.getHours()}else{ getHours = date.getHours()}
// 判斷小時(shí)是否小于10的補(bǔ)全：加0
 if(date.getMinutes() < 10){getMinutes = "0"+date.getMinutes()}else{ getMinutes = date.getMinutes()}
// 判斷分是否小于10的補(bǔ)全：加0
 return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+ getHours +":"+ getMinutes // 返回轉(zhuǎn)換后的值
})

使用起來(lái)很方便的，可以在各個(gè)組件里凡事有要轉(zhuǎn)換顯示時(shí)間的都可以用

<template>
{{date | dateconversion}} // 使用方式，就是怎么簡(jiǎn)單，整個(gè)項(xiàng)目隨便用
</template> 
<script>
export default {
 data () {
 return {
 date: '' // 后臺(tái)傳來(lái)的時(shí)間戳
 }
 }
}
</script>

好了！簡(jiǎn)單的介紹了過(guò)濾器使用方法和方式，下一章我會(huì)講稍微復(fù)雜點(diǎn)，串聯(lián)過(guò)濾器和帶參數(shù)的過(guò)濾器。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com