vue過(guò)濾器實(shí)現(xiàn)日期格式化的案例分析
說(shuō)明
今天將要介紹的是vue中的過(guò)濾器，并且將實(shí)現(xiàn)一個(gè)日期格式化的小案例。大家都知道，我們獲取當(dāng)前日期可以通過(guò)Date對(duì)象獲取。下面我將獲取當(dāng)前時(shí)間并打印出來(lái)。
console.log(new Date());
我們獲取的是一個(gè)標(biāo)準(zhǔn)時(shí)間，控制臺(tái)的輸出如下所示。
在實(shí)際項(xiàng)目開(kāi)發(fā)中，我們通常獲取標(biāo)準(zhǔn)時(shí)間后不是直接拿來(lái)使用，而是要進(jìn)行一些操作然后將它顯示在頁(yè)面中，我們將這些操作稱作時(shí)間格式化。
過(guò)濾器
在vue中，我們可以使用過(guò)濾器來(lái)進(jìn)行時(shí)間格式化。它的寫(xiě)法如下：
// Vue.filter(過(guò)濾器名稱,處理函數(shù))
使用的方式
{{ 過(guò)濾器數(shù)據(jù)| 過(guò)濾器名稱 }}
具體代碼
代碼如下：
<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8' /><meta name='viewport' content='width=device-width, initial-scale=1.0' /><title>Document</title></head><body><div id='app'><p>今天的日期是：{{timer|timerFilter(’-’)}}</p></div><script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script><script>Vue.filter('timerFilter', function (time, type) {const month =time.getMonth() + 1 > 10? time.getMonth() + 1: '0' + (time.getMonth() + 1);const day =time.getDate() > 10 ? time.getDate() : '0' + time.getDate();return time.getFullYear() + type + month + type + day;}); new Vue({el: '#app',data: {timer: new Date(),},});</script></body></html>
代碼的運(yùn)行結(jié)果如下所示：
到此這篇關(guān)于vue過(guò)濾器實(shí)現(xiàn)日期格式化的案例分析的文章就介紹到這了,更多相關(guān)vue 過(guò)濾器日期格式化內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. 前端從瀏覽器的渲染到性能優(yōu)化2. ASP實(shí)現(xiàn)加法驗(yàn)證碼3. ASP基礎(chǔ)入門(mén)第三篇(ASP腳本基礎(chǔ))4. 解析原生JS getComputedStyle5. 無(wú)線標(biāo)記語(yǔ)言(WML)基礎(chǔ)之WMLScript 基礎(chǔ)第1/2頁(yè)6. ASP刪除img標(biāo)簽的style屬性只保留src的正則函數(shù)7. 讀大數(shù)據(jù)量的XML文件的讀取問(wèn)題8. 利用CSS3新特性創(chuàng)建透明邊框三角9. PHP循環(huán)與分支知識(shí)點(diǎn)梳理10. css代碼優(yōu)化的12個(gè)技巧
網(wǎng)公網(wǎng)安備