在Web開發中，顯示日期時間是非常常見的需求。Vue提供了方便的工具箱，使得在Vue中顯示和處理日期時間非常簡單。下面將介紹如何使用Vue來顯示日期時間。

首先，我們需要在Vue組件中定義一個data屬性來存儲當前時間。可以使用Date對象來獲取當前時間：

data () {
return {
currentTime: new Date()
}
}

接下來，在Vue的模板中使用插值表達式來顯示當前時間：

<p>{{ currentTime }}</p>

此時頁面上將顯示當前時間的字符串形式。但通常我們會希望以特定的格式顯示日期時間。

Vue提供了一個特殊的過濾器用于處理日期時間格式：date。可以通過在插值表達式中使用“|”符號加上過濾器名稱來應用過濾器：

<p>{{ currentTime | date }}</p>

當然，此時仍然無法正確顯示日期時間格式。我們還需要在Vue組件中定義date過濾器：

filters: {
date (value) {
const date = new Date(value)
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return `${year}-${month}-${day} ${hour}:${minute}:${second}`
}
}

在這個過濾器中，我們將傳入的日期時間字符串轉換為Date對象，然后將其格式化為“年-月-日 時:分:秒”的形式。

現在，頁面上應該已經正確顯示了格式化后的日期時間。

但是，如果我們希望實時地更新頁面上的日期時間，應該如何處理呢？

Vue提供了一個特殊的計算屬性——computed屬性。computed屬性可以根據data屬性自動計算得出新的值，并緩存結果供后續使用。因此，在計算屬性中使用當前時間即可實時更新頁面上的日期時間：

computed: {
formattedTime () {
const date = new Date(this.currentTime)
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return `${year}-${month}-${day} ${hour}:${minute}:${second}`
}
}

最后，在模板中使用計算屬性即可：

<p>{{ formattedTime }}</p>

這些就是使用Vue顯示日期時間的基本方法。值得注意的是，在實際開發中，我們很可能需要引入第三方日期時間庫，或者采用不同的日期時間格式。但無論如何，使用Vue來處理日期時間都非常方便。