web前端vue filter 過濾器
更新時間：2018年01月12日 09:37:38 作者：奇惠小前端
vue的過濾器通常用在一些常見的文本格式化，過濾器可以用在兩個地方：雙花括號插值和 v-bind 表達式。本文給大家介紹了web前端vue filter 過濾器的相關(guān)知識，感興趣的朋友一起看看吧
vue的過濾器通常用在一些常見的文本格式化，過濾器可以用在兩個地方：雙花括號插值和 v-bind 表達式。
比如給價格自動加上中文的錢的字符“￥”或者是給一個時間段或（時間戳）相互之間的轉(zhuǎn)換過濾。
在javascript和jquery的年代！時間段的顯示或者是提交，都是要在顯示的時候要轉(zhuǎn)換下或者提交的時候轉(zhuǎn)換下，這樣就有點繁瑣了（個人用了vue后的感覺繁瑣了）。
不多說直接看例子如下：
filter定義的過濾器可以局部，可以全局的下面就直接說全局的
老樣子還是等先注冊一個全局的過濾器關(guān)鍵字（filter）
全局的注冊過濾器是在main.js這個文件里，當然也可以單獨的一個js文件里
Vue.filter('dateconversion', function (value) { // 一個時間戳轉(zhuǎn)正常的過濾器
let date = new Date(value) // nuw 一個時間
let getHours // 小時
let getMinutes // 分
if(date.getHours() < 10){getHours = "0"+date.getHours()}else{ getHours = date.getHours()}
// 判斷小時是否小于10的補全：加0
if(date.getMinutes() < 10){getMinutes = "0"+date.getMinutes()}else{ getMinutes = date.getMinutes()}
// 判斷分是否小于10的補全：加0
return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+ getHours +":"+ getMinutes // 返回轉(zhuǎn)換后的值
})
使用起來很方便的，可以在各個組件里凡事有要轉(zhuǎn)換顯示時間的都可以用
<template>
{{date | dateconversion}} // 使用方式，就是怎么簡單，整個項目隨便用
</template>
<script>
export default {
data () {
return {
date: '' // 后臺傳來的時間戳
}
}
}
</script>
好了！簡單的介紹了過濾器使用方法和方式，下一章我會講稍微復雜點，串聯(lián)過濾器和帶參數(shù)的過濾器。
相關(guān)文章
本篇文章主要介紹了vue時間格式化實例代碼，這里整理了詳細的代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
在 Vue Router 4 中,嵌套路由是一種非常重要的功能,它允許我們創(chuàng)建更復雜的 UI 結(jié)構(gòu),同時保持路由的清晰和易于管理,這篇文章主要介紹了Vue Router4 嵌套路由,需要的朋友可以參考下2024-04-04
在Vue的開發(fā)過程中，我們經(jīng)常需要展示代碼片段或者進行代碼高亮與語法著色，Vue提供了多種方式來實現(xiàn)代碼高亮與語法著色，本文將為你詳細介紹這些方法,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue項目如何修改title旁邊的icon圖片，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
最近在用vue做移動端項目，網(wǎng)上找了一些移動端適配的方案，個人覺得手淘團隊flexible.js還是比較容易上手，在這里做下總結(jié)。對vue.js移動端配置flexible.js 相關(guān)知識感興趣的朋友跟隨小編一起看看吧2019-04-04
本文通過實例代碼給大家介紹了Vue中實現(xiàn)拖放排序功能，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
Vue中this.$router.push參數(shù)獲取方法
下面小編就為大家分享一篇Vue中this.$router.push參數(shù)獲取方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧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實現(xiàn)查詢條件展開和收起功能組件(代碼示例)
文章介紹了如何將查詢條件表單封裝成一個通用組件,以提高開發(fā)效率,組件支持多條件的折疊和展開功能,并提供了使用示例,感興趣的朋友一起看看吧2025-01-01
Vue使用antd組件a-form-model實現(xiàn)數(shù)據(jù)連續(xù)添加功能
這篇文章主要介紹了Vue使用antd組件a-form-model實現(xiàn)數(shù)據(jù)連續(xù)添加功能,本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12