vue3写一个选项式并且加个定时器

好的，我可以帮你提供一份简单的 Vue 3 代码，实现一个选项式并添加一个定时器。这里是一个示例代码：

<template>
  <div>
    <div v-if="showOptions">
      <label v-for="(option, index) in options" :key="index">
        <input type="radio" :value="option" v-model="selectedOption" @change="handleOptionChange" />
        {{ option }}
      </label>
    </div>
    <div v-else>
      <p>Selected option: {{ selectedOption }}</p>
      <p>Time remaining: {{ timeRemaining }}</p>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, watch } from 'vue'

export default {
  setup() {
    const state = reactive({
      options: ['Option 1', 'Option 2', 'Option 3'],
      selectedOption: '',
      showOptions: true,
      timeRemaining: 10 // in seconds
    })

    const handleOptionChange = () => {
      state.showOptions = false
      startTimer()
    }

    const startTimer = () => {
      const interval = setInterval(() => {
        state.timeRemaining--
        if (state.timeRemaining === 0) {
          clearInterval(interval)
        }
      }, 1000)
    }

    watch(() => state.timeRemaining, (newValue) => {
      if (newValue === 0) {
        state.showOptions = true
        state.timeRemaining = 10
      }
    })

    return {
      ...toRefs(state),
      handleOptionChange
    }
  }
}
</script>

这份代码实现了一个选项式，当用户选择一个选项后，显示一个结果页面，并开始一个 10 秒的倒计时。当倒计时结束后，重新显示选项页面。