countdown vue

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