vue等待几秒

作者：⒈种依靠゛ζ 发布日期:2025-04-30 浏览:98

// 使用 Vue 和 JavaScript 的 setTimeout 实现等待几秒的效果

new Vue({
  el: '#app',
  data: {
    message: '等待中...'
  },
  methods: {
    waitForSeconds(seconds) {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve();
        }, seconds * 1000);
      });
    }
  },
  mounted() {
    this.waitForSeconds(3).then(() => {
      this.message = '3秒后更新';
    });
  }
});

解释说明：

data: 定义了一个 message 变量，初始值为 "等待中..."。
waitForSeconds 方法: 使用 setTimeout 创建一个延迟执行的 Promise。参数 seconds 表示等待的时间（以秒为单位）。
mounted 生命周期钩子: 当组件挂载完成后，调用 waitForSeconds(3) 方法，等待 3 秒后更新 message 的值为 "3秒后更新"。

这样就可以实现 Vue 中等待几秒后再执行某些操作的效果。

上一篇：vue3 setup computed

下一篇：vue查看版本