在模板插值中设置日期格式-vue js

Question

我想在模板｛｛date｝｝中格式化日期。

<div v-for="(data, index) in variable" :key="index">
{{data.date}}
</div>

其中data.date是一个看起来像2014-09-09T18:30:00.000Z的字符串。

我想要一个人类可读的格式。

我尝试了{{moment(data.visit_date).format("YYYY-MM-DD")}}，但它在控制台中抛出错误，说瞬间不是函数。

Answer 1

您能在组件中定义一个方法，然后像下面这样使用它吗？

<script>
import moment from 'moment';
export default {
methods: {
getFormattedDate(date) {
return moment(date).format("YYYY-MM-DD")
}
}
}
</script>

<div v-for="(data, index) in variable" :key="index">
{{getFormattedDate(data.date)}}
</div>