在Vue.js中我們可以使用filter來格式化日期,可以將日期格式化成各種各樣的格式。
// 引入 moment.js
import moment from 'moment';
// 定義一個全局日期過濾器
Vue.filter('dateFormat', function (value, formatStr = 'YYYY-MM-DD HH:mm:ss') {
return moment(value).format(formatStr);
});
// 使用過濾器{{ new Date() | dateFormat }}{{ new Date() | dateFormat('YYYY年MM月DD日') }}
上面的代碼中,我們使用了moment.js庫來格式化日期,并定義了一個全局的日期過濾器。該過濾器的第一個參數value是要格式化的日期,第二個參數formatStr是格式化的字符串,如果沒有傳遞該參數,則默認采用'YYYY-MM-DD HH:mm:ss'格式。
使用過濾器時,我們可以在要格式化日期的變量后使用'|'符號加上dateFormat過濾器名即可。在Vue實例的template中寫入:
{{ new Date() | dateFormat }}
{{ new Date() | dateFormat('YYYY年MM月DD日') }}
這樣就可以將日期格式化成我們需要的樣式了。