Обратный счётчик на vue js
176
04 апреля 2019, 23:50
Не могу сообразить до конца как отобразить на vue обратный таймер
Сам код:
(Часть компонента)
data(){
return {
interval: 30,
}
},
methods: {
timer() {
setInterval(function () {
if (this.interval > 0) {
this.interval--
}
//... Как дальше отобразить не могу сообразить
}, 1000);
}
},
mounted() {
this.timer();
}
Пытаюсь отобразить обратный отсчёт:
{{ interval }}
Answer 1
В mounted запускается таймер методом startTimer(). Таймер запускается через setInterval с промежутком 1000 ms. В момент уничтожения компонента, или когда отсчёт дойдет до нуля, таймер нужно будет выключить, поэтому в методе destroyed помещаем stopTimer(). а в блоке watch отслеживаем текущее время, и если оно окажется равным нулю, то останавливаем.
new Vue({
el: '#app',
data: {
currentTime: 5,
timer: null,
},
mounted() {
this.startTimer()
},
destroyed() {
this.stopTimer()
},
methods: {
startTimer() {
this.timer = setInterval(() => {
this.currentTime--
}, 1000)
},
stopTimer() {
clearTimeout(this.timer)
},
},
watch: {
currentTime(time) {
if (time === 0) {
this.stopTimer()
}
}
},
})<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
<p>{{ currentTime }}</p>
</div>
-
18:08
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
-
18:54
-
17:35
-
14:27
-
21:22
-
14:06
-
21:33
Виртуальный выделенный сервер (VDS) становится отличным выбором
-
22:26
-
22:40
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47709 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30547 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23736 visits
- Как через css изменить цвет png изображения? 10373 visits
- Blob video url download 9982 visits
- Php curl запрос через прокси с авторизацией 9241 visits
- Работа с captcha vk api 8118 visits
© "hostciti.net" 31.1.2025 | 05:36