Vue过滤器的简单使用--实时显示格式化的时间
生活随笔
收集整理的這篇文章主要介紹了
Vue过滤器的简单使用--实时显示格式化的时间
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Vue的過濾器的使用是在{{}}插值的尾部添加一個管道符? |?
過濾的規則是自己定義的，通過給Vue實例添加選項filters來設置
通過過濾器對時間進行格式化從而實時顯示時間
<!doctype html> <html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus?"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Vue 過濾器的簡單使用---實時顯示格式化時間</title></head><body><div id="app">{{date | formatDate}}</div> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script>//此函數的作用是在月份、日期、小時等小于10時在前面補0var padDate = function(value){return value<10 ? '0'+value : value;};var app = new Vue({el:'#app',data:{date:new Date()},filters:{//這里的value參數就是要過濾的數據formatDate : function (value) {var date = new Date(value);var year = date.getFullYear();var month = padDate(date.getMonth());var day = padDate(date.getDate());var hours = padDate(date.getHours());var minutes = padDate(date.getMinutes());var seconds = padDate(date.getSeconds())；//將整理好的格式化的日期返回return year+'-'+month+'-'+day+'-'+hours+':'+minutes+':'+seconds;}},//mounted是在el掛載到實例上后調用，一般第一個業務邏輯會在這里開啟mounted:function(){var _this = this; //聲明一個變量指向Vue實例this，保證作用域一致this.timer = setInterval(function(){??//設置定時器，每秒執行一次function函數，//函數是獲取當前時間并給date變量賦值(每秒賦值一次)_this.date = new Date();? //修改數據date},1000);},beforeDestroy:function(){if(this.timer){clearInterval(this.timer);? //在Vue實例銷毀前，清除定時器}}}) </script></body> </html>
過濾器也可以串聯：
{{ message | filter1 | filter2 }}
過濾器也可以接受參數：
{{ message | filter1 ('arg1','arg2')}}
這里的字符串arg1 和 arg2 分別傳給過濾器的第二個和第三個參數，第一個是數據本身
總結
以上是生活随笔為你收集整理的Vue过滤器的简单使用--实时显示格式化的时间的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Navicat怎样同步两个数据库中的表
- 下一篇： Vue之v-on绑定监听事件