web前端vue filter 過濾器
vue的過濾器通常用在一些常見的文本格式化，過濾器可以用在兩個(gè)地方：雙花括號(hào)插值和 v-bind 表達(dá)式。
比如給價(jià)格自動(dòng)加上中文的錢的字符“￥”或者是給一個(gè)時(shí)間段或（時(shí)間戳）相互之間的轉(zhuǎn)換過濾。
在javascript和jquery的年代！時(shí)間段的顯示或者是提交，都是要在顯示的時(shí)候要轉(zhuǎn)換下或者提交的時(shí)候轉(zhuǎn)換下，這樣就有點(diǎn)繁瑣了（個(gè)人用了vue后的感覺繁瑣了）。
不多說直接看例子如下：
filter定義的過濾器可以局部，可以全局的下面就直接說全局的
老樣子還是等先注冊(cè)一個(gè)全局的過濾器關(guān)鍵字（filter）
全局的注冊(cè)過濾器是在main.js這個(gè)文件里，當(dāng)然也可以單獨(dú)的一個(gè)js文件里
Vue.filter('dateconversion', function (value) { // 一個(gè)時(shí)間戳轉(zhuǎn)正常的過濾器
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)換后的值
})
使用起來很方便的，可以在各個(gè)組件里凡事有要轉(zhuǎn)換顯示時(shí)間的都可以用
<template>
{{date | dateconversion}} // 使用方式，就是怎么簡單，整個(gè)項(xiàng)目隨便用
</template>
<script>
export default {
data () {
return {
date: '' // 后臺(tái)傳來的時(shí)間戳
}
}
}
</script>
好了！簡單的介紹了過濾器使用方法和方式，下一章我會(huì)講稍微復(fù)雜點(diǎn)，串聯(lián)過濾器和帶參數(shù)的過濾器。
相關(guān)文章
VeeValidate在vue項(xiàng)目里表單校驗(yàn)應(yīng)用案例
這篇文章主要介紹了VeeValidate在vue項(xiàng)目里表單校驗(yàn)應(yīng)用案例，VeeValidate是Vue.js的驗(yàn)證庫，它有很多驗(yàn)證規(guī)則，并支持自定義規(guī)則，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-05-05
vue切換頁面(路由)時(shí)如何保持滾動(dòng)條回到頂部
這篇文章主要介紹了vue 切換頁面(路由)時(shí)如何保持滾動(dòng)條回到頂部問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
通用vue組件化展示列表數(shù)據(jù)實(shí)例詳解
組件化開發(fā)能大幅提高應(yīng)用的開發(fā)效率、測試性、復(fù)用性等,下面這篇文章主要給大家介紹了關(guān)于通用vue組件化展示列表數(shù)據(jù)的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue的token刷新處理的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
動(dòng)態(tài)加載權(quán)限管理模塊中的Vue組件
本篇文章給大家詳細(xì)講解了如何在權(quán)限管理模塊中動(dòng)態(tài)的加載VUE組件的過程，有這方面需求的朋友跟著學(xué)習(xí)下吧。2018-01-01
vue將毫秒數(shù)轉(zhuǎn)化為正常日期格式的實(shí)例
今天小編就為大家分享一篇vue將毫秒數(shù)轉(zhuǎn)化為正常日期格式的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue3使用ref和reactive管理狀態(tài)的代碼示例
ref 和 reactive 是 Composition API 中用來聲明響應(yīng)式數(shù)據(jù)的兩個(gè)核心函數(shù),在 Vue 3 中,使用 setup 語法糖可以更簡潔地使用這些功能,本文將探討如何使用 ref 和 reactive 來管理狀態(tài),并解釋它們之間的區(qū)別,需要的朋友可以參考下2024-09-09
vxe-table中vxe-grid(高級(jí)表格)的使用方法舉例
vxe-table是一個(gè)基于vue的表格組件,下面這篇文章主要給大家介紹了關(guān)于vxe-table中vxe-grid(高級(jí)表格)的使用方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
vue項(xiàng)目中created()被調(diào)用多次的踩坑實(shí)戰(zhàn)
在vue項(xiàng)目中我在created中調(diào)用了兩次get數(shù)據(jù)請(qǐng)求,所以下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中created()被調(diào)用多次的踩坑實(shí)戰(zhàn),需要的朋友可以參考下2023-03-03
這篇文章主要介紹了如何在Vue.JS中使用圖標(biāo)組件，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-08-08