如何在 Vue 中每 3 秒循环添加和移除活动类？

2024-03-19 20:57:05

Vue 中每 3 秒循环添加和移除活动类

问题

在 Vue 中，如何创建一个循环，每 3 秒向一系列元素添加和移除一个活动类？目标是实现一个动态效果，使活动类在这些元素之间循环移动。

解决方案概述

要解决此问题，我们将使用 Vue 的 mounted() 生命周期钩子和 setInterval() 方法。mounted() 钩子允许我们在组件挂载后运行代码，而 setInterval() 可安排在指定间隔后重复执行函数。

步骤

1. 在 mounted() 钩子中设置间隔

在组件的 mounted() 钩子中，我们使用 setInterval() 设置一个间隔，每 3 秒执行一次：

mounted() {
  this.interval = setInterval(() => {
    this.toggleActiveClass();
  }, 3000);
},

2. 创建 toggleActiveClass() 方法

接下来，我们创建 toggleActiveClass() 方法，该方法将循环遍历元素并切换活动类：

toggleActiveClass() {
  const activeElement = this.$refs.boxitem.find(item => item.classList.contains('active'));
  if (activeElement) {
    activeElement.classList.remove('active');
  }
  const nextElement = activeElement ? activeElement.nextElementSibling : this.$refs.boxitem[0];
  nextElement.classList.add('active');
}

this.$refs.boxitem 获取对所有 boxitem 元素的引用。
item.classList.contains('active') 检查元素是否具有活动类。
activeElement.classList.remove('active') 从活动元素中移除活动类。
activeElement.nextElementSibling 获取活动元素的下一个兄弟元素（下一个 boxitem 元素）。
nextElement.classList.add('active') 为下一个兄弟元素添加活动类。

3. 清除间隔

在组件销毁之前，我们使用 beforeDestroy() 钩子清除间隔，以避免内存泄漏：

beforeDestroy() {
  clearInterval(this.interval);
},

代码示例

<template>
  <div class="container">
    <div class="box-item" ref="boxitem">1</div>
    <div class="box-item" ref="boxitem">2</div>
    <div class="box-item" ref="boxitem">3</div>
    <div class="box-item" ref="boxitem">4</div>
    <div class="box-item" ref="boxitem">5</div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.interval = setInterval(() => {
      this.toggleActiveClass();
    }, 3000);
  },
  beforeDestroy() {
    clearInterval(this.interval);
  },
  methods: {
    toggleActiveClass() {
      const activeElement = this.$refs.boxitem.find(item => item.classList.contains('active'));
      if (activeElement) {
        activeElement.classList.remove('active');
      }
      const nextElement = activeElement ? activeElement.nextElementSibling : this.$refs.boxitem[0];
      nextElement.classList.add('active');
    }
  }
};
</script>