web前端vue filter 過濾器

更新時(shí)間：2018年01月12日 09:37:38 作者：奇惠小前端

vue的過濾器通常用在一些常見的文本格式化，過濾器可以用在兩個(gè)地方：雙花括號(hào)插值和 v-bind 表達(dá)式。本文給大家介紹了web前端vue filter 過濾器的相關(guān)知識(shí)，感興趣的朋友一起看看吧

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

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

您可能感興趣的文章:

相關(guān)文章

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