這篇文章主要講解了“VUE過濾器的使用方法”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“VUE過濾器的使用方法”吧!
堅守“ 做人真誠 · 做事靠譜 · 口碑至上 · 高效敬業(yè) ”的價值觀,專業(yè)網(wǎng)站建設(shè)服務(wù)10余年為成都咖啡廳設(shè)計小微創(chuàng)業(yè)公司專業(yè)提供成都定制網(wǎng)頁設(shè)計營銷網(wǎng)站建設(shè)商城網(wǎng)站建設(shè)手機網(wǎng)站建設(shè)小程序網(wǎng)站建設(shè)網(wǎng)站改版,從內(nèi)容策劃、視覺設(shè)計、底層架構(gòu)、網(wǎng)頁布局、功能開發(fā)迭代于一體的高端網(wǎng)站建設(shè)服務(wù)。都9012了,我們就采用 ES Module的寫法,在vue初始化的項目src的文件中新建一個filters文件夾,并在其中添加DateFmt.js文件,代碼如下
// wx:46488492export function DateFmt(date, fmt) {if (date == null) return null;var o = { "M+": date.getMonth() + 1, // 月份 "d+": date.getDate(), // 日 "h+": date.getHours(), // 小時 "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; }
定義好函數(shù)后,我們采用全局注冊filter的方式。在main.js
中使用import { DateFmt } from '@/filters/DateFmt.js'
導(dǎo)入我們上邊定義的函數(shù)。 使用Vue.filter("DateFmt", DateFmt)
完成filter全局注冊。
在components
文件夾中,添加我們的測試組件DateFormat.vue
,在該文件template>div
節(jié)點下輸入{{new Date()|DateFmt('yyyy-MM-dd hh:mm:ss')}}
然后在app.vue引入我們剛新添加的組件,運行,你就會在看到當(dāng)前日期已經(jīng)按照我們需要的格式顯示在網(wǎng)頁上。是的,就是這么簡單,那完了么?
好奇的朋友會發(fā)現(xiàn),我們定義的filter都是在template中使用的,那我如何在js代碼中使用呢?當(dāng)然,在開發(fā)這兩個app期間,減少數(shù)據(jù)轉(zhuǎn)換的次數(shù),有了這樣的需求。
回到開頭,我們強調(diào)了一下,過濾器其實就是一個函數(shù)。既然是函數(shù),那引入就好了。所以在我們最初建立 DateFormat.vue
單文件組件的<script>
塊中使用import { DateFmt } from '@/filters/DateFmt.js'
導(dǎo)入我們的函數(shù)。代碼如下:
<script>// wx:46488492import { DateFmt } from '@/filters/DateFmt.js';export default { data(){return{curDateImportFilter: DateFmt(new Date(), 'yyyy-MM-dd hh:mm:ss') }}} </script>
在我們<template>
中新加一個元素,并綁定 curDateImportFilter
屬性,運行 npm run serve 回到瀏覽器,你就會看到兩個格式化日期。這樣好嗎?我們多了一個import , 雖然實現(xiàn)了,但覺得不夠好。
如果我們仔細看官方文檔,就會發(fā)現(xiàn)官說明了,通過 Vue.filter("filter")
返回定義的函數(shù)
,所以Vue.filter不僅可以注冊,還可以返回。
我們繼續(xù)在data中添加屬性 :
curDateVueFilter: Vue.filter("DateFmt")(new Date(), 'yyyy-MM-dd hh:mm:ss')
通過上邊的步驟綁定該屬性,你會在瀏覽器上看到三個格式化好的日期。要使用Vue.filter,我們不得不額外的導(dǎo)入import Vue from 'vue'
。跟上邊一樣,雖然實現(xiàn)了,但不夠好。
在vue組件,每個組件都有各自的屬性,這些屬性大多掛載中屬性 $options
中,在chrome瀏覽器打印$vm0信息,我們就找到filter的信息。這里科普一下,在安裝vue開發(fā)者工具后$vm0表示我們當(dāng)前選擇的組件,結(jié)果如下圖所示:
從圖形上看,當(dāng)前組件的filters為一個對象,并不能直接找到,不過展開至__proto__
原型上看到了我們的DateFmt方法。好了現(xiàn)在我們在繼續(xù)在data中添加屬性
curDateOptFilter: this.$options.filters.DateFmt(new Date(), 'yyyy-MM-dd hh:mm:ss')
是的,采用這個方式,就不用再引入vue或者函數(shù)了,跟直接在template使用一樣。簡潔方便,感覺好多了。在深入一點,通過調(diào)試我們就會發(fā)現(xiàn) Vue.filter 是調(diào)用options.filters原型上的方法,如下圖所示
感謝各位的閱讀,以上就是“VUE過濾器的使用方法”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對VUE過濾器的使用方法這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián),小編將為大家推送更多相關(guān)知識點的文章,歡迎關(guān)注!
本文名稱:VUE過濾器的使用方法-創(chuàng)新互聯(lián)
瀏覽地址:http://muchs.cn/article26/ejecg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站排名、App設(shè)計、面包屑導(dǎo)航、云服務(wù)器、關(guān)鍵詞優(yōu)化、網(wǎng)頁設(shè)計公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容