vue學習筆記之過濾器的基本使用方法例項分析
阿新 • • 發佈:2020-02-03
本文例項講述了vue學習筆記之過濾器的基本使用方法。分享給大家供大家參考,具體如下:
以下是一個將瀏覽器預設時間格式格式化的例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>過濾器</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <!-- | 是管道符,可以對前面的資料進行過濾,一般用於格式化資料,eg,貨幣(1,000,000)--> <div id="root"> {{date | formatDate}} </div> <script> // 在時間小於10前補0 var padDate = function (value) { return value < 10 ? '0' + value : value; } var app = new Vue({ el: "#root",data: { date: new Date() },/*過濾器*/ filters: { formatDate: function (value) { var date = new Date(value); var year = date.getFullYear(); var month = padDate(date.getMonth()); var day = padDate(date.getDay()); var hour = padDate(date.getHours()); var minutes = padDate(date.getMinutes()); var seconds = padDate(date.getSeconds()); return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds; } },/*掛載完成,html頁面渲染完畢,一半做一些Ajax操作,只執行一次*/ mounted: function () { var _this = this; this.timer = setInterval(function () { _this.date = new Date(); },1000); },beforeDestory: function () { if (this.timer) { clearInterval(this.timer);// 在vue例項銷燬前清楚定時器 } } }) </script> </body> </html>
- 在vue中使用過濾器,要注意!只是改變了在前端頁面渲染的格式,而不會改變資料的儲存的格式
- 全域性過濾器定義必須始終位於Vue例項之上,否則你將會得到一個“Failed to resolve filter: XXX”的錯誤資訊。
- 過濾器串聯
{{text | filter1 | filter2}}
- 過濾器接受引數【js中接受的引數,第一個始終是value,傳入的引數是第2,3,4....個引數】
{{text | filter('arg1','arg2')}}
感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具:http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。
希望本文所述對大家vue.js程式設計有所幫助。