vue.js countdown timer code example
Example 1: countdown vue
<template>
{{ countDown }}
<button type="button" v-on:click="countdown = 5"> setTimeout </button>
</template>
<script>
export default {
data() {
return {
countDown : 0
}
},
method: {}
watch: {
countdown: function(val) {
if(val > 0) {
setTimeout(() => {
this.countdown -= 1;
}, 1000);
}
},
}
}
</script>
Example 2: countdown using vue
<template>
{{ timerCount }}
</template>
<script>
export default {
data() {
return {
timerCount: 30
}
},
watch: {
timerCount: {
handler(value) {
if (value > 0) {
setTimeout(() => {
this.timerCount--;
}, 1000);
}
},
immediate: true
}
}
}
</script>
Example 3: vue js countdown timer
<template>
{{ countDown }}
</template>
<script>
export default {
data() {
return {
countDown : 10
}
},
method: {
countDownTimer() {
if(this.countDown > 0) {
setTimeout(() => {
this.countDown -= 1
this.countDownTimer()
}, 1000)
}
}
}
created: {
this.countDownTimer()
}
}
</script>