1<template>
2 {{ countDown }}
3</template>
4
5<script>
6 export default {
7 data() {
8 return {
9 countDown : 10
10 }
11 },
12 method: {
13 countDownTimer() {
14 if(this.countDown > 0) {
15 setTimeout(() => {
16 this.countDown -= 1
17 this.countDownTimer()
18 }, 1000)
19 }
20 }
21 }
22 created: {
23 this.countDownTimer()
24 }
25 }
26</script>
27
1<template>
2 {{ timerCount }}
3</template>
4
5<script>
6
7 export default {
8
9 data() {
10 return {
11 timerCount: 30
12 }
13 },
14
15 watch: {
16
17 timerCount: {
18 handler(value) {
19
20 if (value > 0) {
21 setTimeout(() => {
22 this.timerCount--;
23 }, 1000);
24 }
25
26 },
27 immediate: true // This ensures the watcher is triggered upon creation
28 }
29
30 }
31 }
32
33</script>
1<template>
2 {{ countDown }}
3 <button type="button" v-on:click="countdown = 5"> setTimeout </button>
4</template>
5
6<script>
7 export default {
8 data() {
9 return {
10 countDown : 0
11 }
12 },
13 method: {}
14 watch: {
15 countdown: function(val) {
16 if(val > 0) {
17 setTimeout(() => {
18 this.countdown -= 1;
19 }, 1000);
20 }
21 },
22 }
23 }
24</script>
25