Использование функции для отображения отображаемого времени в строке

#vue.js

#vue.js

Вопрос:

У меня есть список, который я просматриваю, и каждый элемент имеет временную метку 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"
}
 

Комментарии:

1. formatTime должен быть фильтром: vuejs.org/v2/guide/filters.html

Ответ №1:

Вам просто не нужно this . Ваш v-for атрибут изменяет контекст в дочерних элементах на include product index ) . Таким образом, вы можете сделать:

 {{formatTime(product.timestamp)}}
 

Предположение timestamp — это свойство элементов в products массиве. Также, конечно, при formatTime условии, что функция правильно определена в методах компонента Vue: https://v1.vuejs.org/guide/events.html

Комментарии:

1. Синтаксис предполагает, что это vue2 — key не был представлен до vue2 тех пор, пока не покажется

Ответ №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>