更改 HH:MM:SS 的时间格式

Question

我有一个与 django (django-rest-framework) 一起使用的 api，它将电影对象及其相关信息返回到 Vue 应用程序中。其中一项信息是电影时长。

目的：

{
    "movie_id": 13,
    "duration": "17:52:14",
    ...
    ...
},

组件模板：

<div id="movieDetailSynopsis">
    ...
    ...
    <p>Duration: {{movie.duration}}</p>
</div>

持续时间采用这种格式

时:分:秒

例如：02:22:08

但我希望它看起来像这样

2小时22米

有没有办法在 django 或 vuejs 或 javascript 中实现这一点？

更新：

尝试全局使用过滤器

main.js：

new Vue({
    router,
    components: {App},
    template: '<App/>',
    store,
    filters: {
        durationFormat(value) {
            const duration = moment.duration(value);
            return duration.hours() + 'h ' + duration.minutes() + 's';
        }
    }
}).$mount('#app');

组件模板内部：

<div id="movieDetailSynopsis">
    ...
    ...
    <p>Duration: {{movie.duration | durationFormat}}</p>
</div>

但我收到一个错误：

[Vue warn]：无法解析过滤器：durationFormat（在匿名组件中找到 - 使用“name”选项以获得更好的调试消息。）

Answer 1

这将是使用 Vue 过滤器的好地方。有关过滤器的更多信息请参见此处。您可以在组件中全局或本地注册过滤器。

这是一个全局过滤器：

Vue.filter('formatTime', function(value) {
  if (value) {
    const parts = value.split(":");
    return +parts[0] + "h " + +parts[1] + "m";
  } else {
    return "unknown"
  }
});

以下是您在模板中使用它的方法：

<p>Duration: {{movie.duration | formatTime}}</p>

注意：您可以使格式化功能更加强大 - 这只是一个示例，用于帮助您入门并演示如何在 Vue 中使用它。正如评论中提到的，moment.js库非常适合日期/时间解析和操作。

这是 codepen 中的示例（包括使用 moment.js）。

更新（回应评论）

尝试更新您的 main.js 以注册过滤器，如下所示：

// register global filter
Vue.filter('durationFormat', function(value) {
  const duration = moment.duration(value);
  return duration.hours() + 'h ' + duration.minutes() + 's';
});

new Vue({
    router,
    components: {App},
    template: '<App/>',
    store,
}).$mount('#app');