在前端開發中，經常會用到實時的時間戳，比如商品的上架時間等。使用 Vue 進行開發的時候，我們可以通過添加動態時間的方式來實現這一功能。接下來，我們將詳細介紹如何在 Vue 中添加動態時間。

首先，我們需要在 Vue 生命周期中設置一個計時器。這個計時器將會不斷地更新我們的時間戳，實現動態時間的效果。我們可以在 Vue 的 created 鉤子函數中添加計時器。具體實現如下：

created() {
setInterval(() =>{
this.time = new Date().getTime();
}, 1000);
}

上面的代碼中，我們使用了 setInterval() 函數，每隔一秒就會更新時間戳。同時，我們也定義了一個 time 變量用來存儲時間戳。

接下來，我們需要在頁面中渲染出時間戳。在 Vue 中，我們可以使用 mustache 語法來渲染頁面，即使用雙括號將數據綁定在頁面中。下面是渲染時間戳的代碼：

{{ time }}

通過上面的代碼，我們就將時間戳渲染到了頁面中。此時，頁面上會不斷地動態更新時間戳。

如果我們想要將時間戳轉換成人類可讀的時間格式，該怎么辦呢？這時，我們可以選擇使用 Moment.js 這個庫。Moment.js 可以讓我們輕松地將時間戳轉換為各種時間格式。首先，我們需要下載 Moment.js 這個庫，并在 Vue 項目中引入 Moment.js 庫，具體步驟如下：

npm install moment --save

import moment from 'moment';

接下來，我們需要使用 Moment.js 將時間戳轉換為我們想要的時間格式。下面是一個例子：

{{ moment(time).format('YYYY-MM-DD HH:mm:ss') }}

上面的代碼中，我們將 time 變量傳入了 moment 函數中，并使用 format 方法將時間戳轉換為了 'YYYY-MM-DD HH:mm:ss' 的格式。當然，你也可以根據需要自己設定格式。

最后，我們還可以使用 Vue 的 filter 過濾器，在頁面中使用過濾器來格式化我們的時間戳。通過使用過濾器，我們可以讓代碼更加簡潔，具有可讀性。下面是一個過濾器的例子：

{{ time | formatTime }}

filters: {
formatTime(time) {
return moment(time).format('YYYY-MM-DD HH:mm:ss');
}
}

上面的代碼中，我們定義了一個名為 formatTime 的過濾器，通過 moment.js 將時間戳轉換為了我們想要的時間格式。同時，我們在頁面中使用了過濾器，代碼更加簡潔易讀。

通過上面的幾步，我們就可以在 Vue 中添加動態時間啦！這樣，我們就可以在頁面中實時顯示時間戳，提升用戶體驗。