<div class="fullDate">{{new Date().getDate()+'.'+ (new Date().getMonth()+1)+'.'+ new Date().getFullYear()+' '+new Date().getHours()+':'+new Date().getMinutes()}}</div>
<template>
<div>
<!-- В шаблоне не вызывают какие-либо функций. Только выводят готовые значения -->
{{localeDate}}
</div>
</template>
<script>
{
data: () => ({
// Дата хранится в виде числа. Не обязательно в state компонента. Но и в других местах тоже
date: 1580558031264,
}),
computed: {
localeDate() {
// Конвертируем число в строку. Для этого существуют специальные методы
// toLocaleDateString() или toLocaleString() или toLocaleTimeString()
// Итоговая строка будет зависеть от локализации системы пользователя.
// Для русской локали это будет "01.02.2020",
// для американской "2/1/2020",
// для немецкой — "1.2.2020"
// Вы НЕ должны устанавливать формат даты самостоятельно
return (new Date(this.date)).toLocaleDateString()
},
},
// Если нужно изменять дату в реальном времени вешаем таймер
created() {
this.intervalId = setInterval(() => this.date = Date.now(), 1000); // Обновляем значения не чаще раза в секунду. А то и реже.
},
// Если повесили таймер, то его нужно отключать
beforeDestroy() {
if (this.intervalId) clearInterval(this.intervalId)
},
}
</script>
data: () => ({
date: new Date(),
}),
filters: {
formatDate1: d => d.toLocaleString('ru-RU').replace(',', '').slice(0, -3),
},
methods: {
formatDate2: d => [ 'Date', 'Month', 'FullYear', 'Hours', 'Minutes' ]
.map((n, i) => '.. :'.charAt(~-i) + `${d[`get${n}`]() + !~-i}`.padStart(2, 0))
.join(''),
},<div class="fullDate">{{ date | formatDate1 }}</div>
<div class="fullDate">{{ formatDate2(date) }}</div>
Простой
Простой
Средний
