Question

我有一个要迭代的列表，每个项目都有一个unix时间戳。我有一个转换时间戳的函数，但是我不确定如何在Vue中使用此内联。

<div 
    v-for="(product,index) in products"
    :key="`product-${index}`"
    class="product">
    <div class="container">
        {{this.formatTime(1555531395)}}
    </div>

</div>

formatTime: function(timestamp) {
    return "testing"
}

Answer 1

您只是不需要this。您的v-for属性将子元素中的上下文更改为包括product（和index）。因此，您可以这样做：

{{formatTime(product.timestamp)}}

假设timestamp是products数组中项目的属性。另外，当然，假设在Vue组件的方法中正确定义了formatTime函数：https://v1.vuejs.org/guide/events.html

Answer 2

我更喜欢使用自定义过滤器的方法：

Vue.filter('formatDate', function(timestamp) {
    var date = new Date(timestamp * 1000);
    return date.toLocaleDateString("en-US"); // or other format.
})

其中yourDateFormatFunction当然是用于格式化时间戳的功能。

然后，在您的模板中：

<div class="container">
    {{ product.timestamp | formatDate }}
</div>

使用函数以内联方式显示渲染的时间

2 个答案: