溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了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>
{{text | filter1 | filter2}}
{{text | filter('arg1','arg2')}}
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
希望本文所述對大家vue.js程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
