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

我有一个与django（django rest框架）一起提供的api，它将电影对象及其相关信息返回到Vue应用程序中。其中一个信息是电影的持续时间

对象：

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

组件模板：

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

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

{% load your_tags %}
<div id="movieDetailSynopsis">
  ...
  ...
  <p>Duration: {{movie.duration|convert_time}}</p>
</div>

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

...
...
持续时间：{{movie.Duration}

持续时间采用此格式

HH:MM:SS

例如：02:22:08

但我希望它看起来是这样的

2h 22m

在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');

newvue({
路由器，
组件：{App}，
模板：“”，
商店，
过滤器：{
持续时间格式（值）{
常数持续时间=力矩持续时间（值）；
返回duration.hours（）+'h'+duration.minutes（）+'s'；
}
}
}).$mount（“#app”）；

在组件模板内：

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

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

{% load your_tags %}
<div id="movieDetailSynopsis">
  ...
  ...
  <p>Duration: {{movie.duration|convert_time}}</p>
</div>

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

...
...
持续时间：{movie.Duration | durationFormat}

但我有一个错误：

[Vue warn]：无法解析筛选器：durationFormat （在匿名组件中找到-使用“名称”选项可以更好地调试消息。）

---

您可以使用如下一些基本javascript：

var time = "02:22:08";
var timeConverted = parseInt(t.split(':')[0]) + 'h' + ' ' + parseInt(t.split(':')[1]) + 'm';

// 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');

---

我只知道javascript way.try format（）方法

函数格式（时间）{
返回时间。替换（/（？：0）？（\d+）：（？：0）？（\d+）.*/，“$1h$2m”）；
}
[“23:12:15”，“02:03:05”].forEach（函数（时间）{
console.log（时间+“==>”+格式（时间））；
});这将是使用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>

持续时间：{{movie.Duration | formatTime}


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


更新（回应评论）

尝试更新main.js以注册筛选器，如下所示：

var time = "02:22:08";
var timeConverted = parseInt(t.split(':')[0]) + 'h' + ' ' + parseInt(t.split(':')[1]) + 'm';

// 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');

//寄存器全局筛选器
Vue.filter（'durationFormat'，函数（值）{
常数持续时间=力矩持续时间（值）；
返回duration.hours（）+'h'+duration.minutes（）+'s'；
});
新Vue({
路由器，
组件：{App}，
模板：“”，
商店，
}).$mount（“#app”）；
您可以制作自己的模板标签：

from django import template

register = template.Library()

@register.simple_tag
def convert_time(value):
    t_list = [t for t in value.split(':')]
    return '{}h {}m'.format(int(t_list[0]), t_list[1])

然后在模板中使用它：

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

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

{% load your_tags %}
<div id="movieDetailSynopsis">
  ...
  ...
  <p>Duration: {{movie.duration|convert_time}}</p>
</div>

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

{%loadyour_tags%}
...
...
持续时间：{movie.Duration}转换时间}


有关详细信息，请查看。
您可以创建django标记过滤器。你的tagfilter.py

from django import template
register = template.Library()

@register.filter
def tagFilter(duration):
    d = duration.split(":")
    hh,mm,ss = d[0],d[1],d[2]
    return "%sh %sm %ss" % (hh,mm,ss) # If you don't want to show the seconds, you may remove it:
    # "%sh %sm" % (hh,mm)

您的django模板：

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

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

{% load your_tags %}
<div id="movieDetailSynopsis">
  ...
  ...
  <p>Duration: {{movie.duration|convert_time}}</p>
</div>

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


...
...
持续时间：{movie.Duration | tagFilter}}


我建议在主Vue globaly中尝试使用
过滤器的任何日期/时间操作或格式中使用矩.js，但出现错误
[Vue warn]：无法解析过滤器：durationFormat（在匿名组件中找到-使用“name”选项以更好地调试消息）。
。我已经更新了问题。现在我在本地使用过滤器。你能给我一些建议吗？但是谢谢你的完整回答！隐马尔可夫模型。。。你在哪里使用过滤器？在应用程序组件模板中？如果是，请尝试在应用程序组件中本地注册筛选器，或使用
Vue.filter（）
全局注册筛选器。我认为问题在于您已在根Vue实例中本地定义了筛选器，但正在尝试在子组件中使用它。是的，我在根Vue实例中本地使用了筛选器。非常感谢。