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ò)濾器。
相關(guān)文章
本篇文章主要介紹了vue時(shí)間格式化實(shí)例代碼，這里整理了詳細(xì)的代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
在 Vue Router 4 中,嵌套路由是一種非常重要的功能,它允許我們創(chuàng)建更復(fù)雜的 UI 結(jié)構(gòu),同時(shí)保持路由的清晰和易于管理,這篇文章主要介紹了Vue Router4 嵌套路由,需要的朋友可以參考下2024-04-04
vue中實(shí)現(xiàn)代碼高亮與語(yǔ)法著色的方法介紹
在Vue的開(kāi)發(fā)過(guò)程中，我們經(jīng)常需要展示代碼片段或者進(jìn)行代碼高亮與語(yǔ)法著色，Vue提供了多種方式來(lái)實(shí)現(xiàn)代碼高亮與語(yǔ)法著色，本文將為你詳細(xì)介紹這些方法,需要的朋友可以參考下2023-06-06
vue項(xiàng)目如何修改title旁邊的icon圖片
這篇文章主要介紹了vue項(xiàng)目如何修改title旁邊的icon圖片，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
詳解vue.js移動(dòng)端配置flexible.js及注意事項(xiàng)
最近在用vue做移動(dòng)端項(xiàng)目，網(wǎng)上找了一些移動(dòng)端適配的方案，個(gè)人覺(jué)得手淘團(tuán)隊(duì)flexible.js還是比較容易上手，在這里做下總結(jié)。對(duì)vue.js移動(dòng)端配置flexible.js 相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧2019-04-04
Vue實(shí)現(xiàn)拖放排序功能的實(shí)例代碼
本文通過(guò)實(shí)例代碼給大家介紹了Vue中實(shí)現(xiàn)拖放排序功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
Vue中this.$router.push參數(shù)獲取方法
下面小編就為大家分享一篇Vue中this.$router.push參數(shù)獲取方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Vue3如何根據(jù)搜索框內(nèi)容跳轉(zhuǎn)至本頁(yè)面指定位置
在開(kāi)發(fā)中我們經(jīng)常遇到這樣的需求,根據(jù)要求跳轉(zhuǎn)至本頁(yè)面指定位置,這篇文章主要給大家介紹了關(guān)于Vue3如何根據(jù)搜索框內(nèi)容跳轉(zhuǎn)至本頁(yè)面指定位置的相關(guān)資料,需要的朋友可以參考下2022-11-11
Vue2.0+ElementUI實(shí)現(xiàn)查詢條件展開(kāi)和收起功能組件(代碼示例)
文章介紹了如何將查詢條件表單封裝成一個(gè)通用組件,以提高開(kāi)發(fā)效率,組件支持多條件的折疊和展開(kāi)功能,并提供了使用示例,感興趣的朋友一起看看吧2025-01-01
Vue使用antd組件a-form-model實(shí)現(xiàn)數(shù)據(jù)連續(xù)添加功能
這篇文章主要介紹了Vue使用antd組件a-form-model實(shí)現(xiàn)數(shù)據(jù)連續(xù)添加功能,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12