vue3 settimeout

// 使用 Vue 3 和 setTimeout 的示例代码

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="startTimeout">点击开始倒计时</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('等待中...');

    const startTimeout = () => {
      message.value = '倒计时开始';
      setTimeout(() => {
        message.value = '倒计时结束';
      }, 3000); // 3秒后改变 message 的值
    };

    return {
      message,
      startTimeout
    };
  }
};
</script>

<style scoped>
/* 这里可以添加样式 */
</style>

解释说明：

• ref 是 Vue 3 中用于创建响应式数据的函数。这里我们用它来定义一个名为 message 的响应式变量。
• setTimeout 是 JavaScript 的内置函数，用于在指定的延迟时间后执行一段代码。在这个例子中，我们使用 setTimeout 在 3 秒后改变 message 的值。
• startTimeout 是一个方法，当用户点击按钮时会调用这个方法，触发倒计时逻辑。
• 模板部分包含了一个按钮和一个段落元素，用来显示 message 的当前值，并提供一个按钮来启动倒计时。