vue settimeout

作者：思念的回忆发布日期:2025-09-18 浏览:38

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

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  methods: {
    updateMessage() {
      // 使用 setTimeout 来延迟更新 message 的值
      setTimeout(() => {
        this.message = 'Updated message after 2 seconds!';
      }, 2000);
    }
  },
  mounted() {
    // 当组件挂载后调用 updateMessage 方法
    this.updateMessage();
  }
});

解释说明：

Vue 实例：创建了一个 Vue 实例，并绑定了一个 DOM 元素 #app。
data：定义了一个 message 数据属性，初始值为 'Hello, Vue!'。
methods：定义了一个 updateMessage 方法，该方法使用 setTimeout 函数在 2 秒后更新 message 的值。
mounted 钩子：当 Vue 组件挂载完成后，自动调用 updateMessage 方法，从而在页面加载 2 秒后更新 message 的内容。

这样可以实现定时更新 Vue 组件中的数据。

上一篇：创建一个vue项目

下一篇：vue3 provide inject用法