如何換個(gè)角度使用VUE過濾器詳解
前言
過濾器在Vue中的主要用于文本格式化,如小寫轉(zhuǎn)大小,日期格式化等操作。官方對這個(gè)功能介紹也很簡單,不過確實(shí)很簡單,就一個(gè)函數(shù)而已。但最近在做兩款A(yù)PP時(shí),遇到一些特殊的需求。然后就對vue中的filter一些用法結(jié)合源碼好好的梳理了下。下邊我們以一個(gè)日期格式化展開討論。
1. 定義一個(gè)日期格式化函數(shù)
都9012了,我們就采用 ES Module的寫法,在vue初始化的項(xiàng)目src的文件中新建一個(gè)filters文件夾,并在其中添加DateFmt.js文件,代碼如下
export function DateFmt(date, fmt) { if (date == null) return null; var o = { "M+": date.getMonth() + 1, // 月份 "d+": date.getDate(), // 日 "h+": date.getHours(), // 小時(shí) "m+": date.getMinutes(), // 分 "s+": date.getSeconds(), // 秒 "q+": Math.floor((date.getMonth() + 3) / 3), // 季度 "S": date.getMilliseconds() }; if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length)); for (var k in o) if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); return fmt; }
2. 使用過濾器 DateFmt
定義好函數(shù)后,我們采用全局注冊filter的方式。在main.js中使用import { DateFmt } from '@/filters/DateFmt.js'
導(dǎo)入我們上邊定義的函數(shù)。 使用Vue.filter("DateFmt", DateFmt)
完成filter全局注冊。
在components文件夾中,添加我們的測試組件DateFormat.vue,在該文件template>div節(jié)點(diǎn)下輸入{{new Date()|DateFmt('yyyy-MM-dd hh:mm:ss')}}
然后在app.vue引入我們剛新添加的組件,運(yùn)行,你就會在看到當(dāng)前日期已經(jīng)按照我們需要的格式顯示在網(wǎng)頁上。是的,就是這么簡單,那完了么?
3. 在JS中使用 DateFmt
好奇的朋友會發(fā)現(xiàn),我們定義的filter都是在template中使用的,那我如何在js代碼中使用呢?當(dāng)然,在開發(fā)這兩個(gè)app期間,減少數(shù)據(jù)轉(zhuǎn)換的次數(shù),有了這樣的需求。
3.1 在組件頁面導(dǎo)入函數(shù)
回到開頭,我們強(qiáng)調(diào)了一下,過濾器其實(shí)就是一個(gè)函數(shù)。既然是函數(shù),那引入就好了。所以在我們最初建立 DateFormat.vue 單文件組件的<script>塊中使用import { DateFmt } from '@/filters/DateFmt.js'
導(dǎo)入我們的函數(shù)。代碼如下:
<script> import { DateFmt } from '@/filters/DateFmt.js'; export default { data(){ return{ curDateImportFilter: DateFmt(new Date(), 'yyyy-MM-dd hh:mm:ss') }}} </script>
在我們<template>中新加一個(gè)元素,并綁定 curDateImportFilter屬性,運(yùn)行 npm run serve 回到瀏覽器,你就會看到兩個(gè)格式化日期。這樣好嗎?我們多了一個(gè)import , 雖然實(shí)現(xiàn)了,但覺得不夠好。
3.2 使用Vue.filter 返回過濾器
如果我們仔細(xì)看官方文檔,就會發(fā)現(xiàn)官說明了,通過 Vue.filter("filter")返回定義的函數(shù) ,所以Vue.filter不僅可以注冊,還可以返回。
我們繼續(xù)在data中添加屬性 :
curDateVueFilter: Vue.filter("DateFmt")(new Date(), 'yyyy-MM-dd hh:mm:ss')
通過上邊的步驟綁定該屬性,你會在瀏覽器上看到三個(gè)格式化好的日期。要使用Vue.filter,我們不得不額外的導(dǎo)入import Vue from 'vue'。跟上邊一樣,雖然實(shí)現(xiàn)了,但不夠好。
3.3 使用實(shí)例屬性$options
在vue組件,每個(gè)組件都有各自的屬性,這些屬性大多掛載中屬性 $options中,在chrome瀏覽器打印$vm0信息,我們就找到filter的信息。這里科普一下,在安裝vue開發(fā)者工具后$vm0表示我們當(dāng)前選擇的組件,結(jié)果如下圖所示:
從圖形上看,當(dāng)前組件的filters為一個(gè)對象,并不能直接找到,不過展開至__proto__原型上看到了我們的DateFmt方法。好了現(xiàn)在我們在繼續(xù)在data中添加屬性
curDateOptFilter: this.$options.filters.DateFmt(new Date(), 'yyyy-MM-dd hh:mm:ss')
是的,采用這個(gè)方式,就不用再引入vue或者函數(shù)了,跟直接在template使用一樣。簡潔方便,感覺好多了。在深入一點(diǎn),通過調(diào)試我們就會發(fā)現(xiàn) Vue.filter 是調(diào)用options.filters原型上的方法,如下圖所示
4. 總結(jié)
再簡單的功能,也有你想不到的用法。做開發(fā),還是要會發(fā)散。本來這篇文章還想分享一下 vue 中scope css穿透功能。為了方便閱讀,就且聽下回分解吧。
好了,以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對腳本之家的支持。
相關(guān)文章
vue elementui el-table 表格里邊展示四分位圖效果(功能實(shí)現(xiàn))
這篇文章主要介紹了vue elementui el-table 表格里邊展示四分位圖效果(功能實(shí)現(xiàn)),本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-04-04nginx部署多個(gè)vue項(xiàng)目的方法示例
這篇文章主要介紹了nginx部署多個(gè)vue項(xiàng)目的方法示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09Vue路由守衛(wèi)及頁面登錄權(quán)限控制的設(shè)置方法(兩種)
這篇文章主要介紹了Vue路由守衛(wèi)及頁面登錄權(quán)限控制的設(shè)置方法,本文通過實(shí)例代碼通過兩種方法給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03vue移動端使用appClound拉起支付寶支付的實(shí)現(xiàn)方法
這篇文章主要介紹了vue移動端使用appClound拉起支付寶支付的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11Vue項(xiàng)目pdf(base64)轉(zhuǎn)圖片遇到的問題及解決方法
這篇文章主要介紹了Vue項(xiàng)目pdf(base64)轉(zhuǎn)圖片遇到的問題及解決方法,需要的朋友可以參考下2018-10-10vue中PC端使用高德地圖實(shí)現(xiàn)搜索定位、地址標(biāo)記、彈窗顯示定位詳情(完整實(shí)例)
這篇文章主要介紹了vue中PC端使用高德地圖實(shí)現(xiàn)搜索定位、地址標(biāo)記、彈窗顯示定位詳情,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07vue?3.0使用element-plus按需導(dǎo)入方法以及報(bào)錯解決
Vue3是不能直接使用Element-ui了,需要換成Element-plus,下面這篇文章主要給大家介紹了關(guān)于vue?3.0使用element-plus按需導(dǎo)入方法以及報(bào)錯解決的相關(guān)資料,需要的朋友可以參考下2024-02-02