需求:循环显示1月到12月数值,要求每2.1秒变换一次。
技术栈:vue2
代码:
<template>
<div class="test">
<h1 class="month">{{monthNum}}</h1>
</div>
</template>
<script>
export default{
data(){
return{
monthNum: 1,
timer: null
}
},
mounted(){
this.startTimer();
},
beforeDestroy() {
clearInterval(this.timer);
},
methods:{
startTimer() {
this.timer = setInterval(() => {
this.monthNum++;
if (this.monthNum > 12) {
this.monthNum = 1;
}
}, 2100);
}
}
}
</script>
<style>
.month {
color: #000;
font-size: 18px;
font-weight: normal;
}
</style>
另一种方法,通过取模运算:
<template>
<div class="test">
<h1 class="month">{{monthNum}}</h1>
</div>
</template>
<script>
export default{
data(){
return{
monthNum: 1,
timer: null
}
},
mounted(){
this.startTimer();
},
beforeDestroy() {
clearInterval(this.timer);
},
methods:{
startTimer() {
this.timer = setInterval(() => {
this.monthNum = (this.monthNum % 12) + 1; // 使用取模运算符确保monthNum在1到12之间循环
}, 2100);
}
}
}
</script>
<style>
.month {
color: #000;
font-size: 18px;
font-weight: normal;
}
</style>
初始化为1,显示1;1模12等于1,2模12等于2,...,11模12等于11,12模12等于0,取模后值加上1,显示2至12再至1,循环往复。