vue過濾器實現日期格式化的案例分析
說明
今天將要介紹的是vue中的過濾器，并且將實現一個日期格式化的小案例。大家都知道，我們獲取當前日期可以通過Date對象獲取。下面我將獲取當前時間并打印出來。
console.log(new Date());
我們獲取的是一個標準時間，控制臺的輸出如下所示。
在實際項目開發中，我們通常獲取標準時間后不是直接拿來使用，而是要進行一些操作然后將它顯示在頁面中，我們將這些操作稱作時間格式化。
過濾器
在vue中，我們可以使用過濾器來進行時間格式化。它的寫法如下：
// Vue.filter(過濾器名稱,處理函數)
使用的方式
{{ 過濾器數據| 過濾器名稱 }}
具體代碼
代碼如下：
<!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>
代碼的運行結果如下所示：
到此這篇關于vue過濾器實現日期格式化的案例分析的文章就介紹到這了,更多相關vue 過濾器日期格式化內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！
相關文章：
1. JSP 中response.setContentType()的作用及參數2. idea開啟代碼提示功能的方法步驟3. ASP.NET MVC使用jQuery的Load方法加載靜態頁面及注意事項4. Docker究竟是什么 為什么這么流行 它的優點和缺陷有哪些？5. ASP.NET MVC實現城市或車型三級聯動6. Springboot集成jsp及部署服務器實現原理7. SpringMVC注解之@ResponseBody注解原理8. IntelliJ IDEA 2020常用配置設置大全(方便干活)9. AJAX POST數據中有特殊符號(轉義字符)導致數據丟失的解決方法10. vue自動添加瀏覽器兼容前后綴操作
網公網安備