<template>
<div>
<p>Seconds: {{ seconds }}</p>
<button @click="startTimer">Start Timer</button>
<button @click="stopTimer">Stop Timer</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
const seconds = ref(0);
let timer;
const startTimer = () => {
timer = setInterval(() => {
seconds.value++;
}, 1000);
};
const stopTimer = () => {
clearInterval(timer);
};
</script>
定义响应式数据 seconds
和两个方法 startTimer
和 stopTimer
。在 startTimer
方法中,我们使用 setInterval()
设置定时器,每隔一秒更新 seconds
的值;而在 stopTimer
方法中,我们使用 clearInterval()
来清除定时器。