在前端開發中，我們經常需要對時間進行處理，比如顯示當前時間、截取時間的不同部分等。如果使用Vue框架，可以借助Vue的數據綁定和過濾器來實現對時間的格式化顯示。

我們假設有一個時間戳，如何將其顯示為HH:mm的格式呢？首先，需要將時間戳轉換為標準的Date對象。

// 時間戳
var timestamp = 1635406546000;
// 轉換為Date對象
var date = new Date(timestamp);

現在我們已經得到了一個Date對象，但它仍然是一個包含完整時間信息的對象。接下來，我們需要使用Vue的過濾器來對其進行格式化。

// 注冊Vue過濾器
Vue.filter('formatTime', function (value) {
var date = new Date(value);
var hour = date.getHours();
var minute = date.getMinutes();
return (hour< 10 ? '0' + hour : hour) + ':' + (minute< 10 ? '0' + minute : minute);
});
// 在模板中使用過濾器
{{ timestamp | formatTime }}

在上述代碼中，我們定義了一個名為formatTime的過濾器，并在模板中使用它對timestamp進行格式化。過濾器的作用是將一個值轉換為另一個值，并通過管道符(|)進行使用。

在過濾器的實現中，我們先將timestamp轉換為Date對象，然后分別獲取小時和分鐘，最后將它們轉換為HH:mm的格式。需要注意的是，如果小時或分鐘小于10，需要在其前面補0。

除了使用過濾器，我們還可以直接在Vue組件的computed屬性中對時間進行處理。

export default {
data() {
return {
timestamp: 1635406546000
}
},
computed: {
formattedTime() {
var date = new Date(this.timestamp);
var hour = date.getHours();
var minute = date.getMinutes();
return (hour< 10 ? '0' + hour : hour) + ':' + (minute< 10 ? '0' + minute : minute);
}
}
}

在上述代碼中，我們定義了一個名為formattedTime的計算屬性，并使用它來對timestamp進行格式化。計算屬性的作用是基于已有的值計算出一個新的值，并將其綁定到模板中進行顯示。

與過濾器相比，計算屬性的優點是可以通過getter和setter對值進行監控，當其依賴的值發生變化時，會自動更新。

總之，無論是使用過濾器還是計算屬性，Vue都能輕松實現時間格式化的功能，大大簡化了前端開發的工作量。