Vue bind点击添加活动类(并从最后一个中删除)

<template>
  <div>
    <!-- 循环渲染列表项，并为每个项绑定点击事件 -->
    <div
      v-for="(item, index) in items"
      :key="item.id"
      :class="{ active: activeIndex === index }"
      @click="setActive(index)"
    >
      {{ item.text }}
    </div>
  </div>
</template>

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

export default {
  setup() {
    // 假设有一个活动项的索引
    const activeIndex = ref(null);
    // 假设有一个活动项的数组
    const items = ref([
      { id: 1, text: 'Item 1' },
      { id: 2, text: 'Item 2' },
      { id: 3, text: 'Item 3' },
      // ...更多项
    ]);

    // 设置活动项的函数
    function setActive(index) {
      activeIndex.value = index;
    }

    return { activeIndex, items, setActive };
  }
};
</script>

<style>
.active {
  /* 定义活动类的样式 */
  background-color: yellow;
}
</style>

function setActive(index) {
  // 如果当前活动项不是最后一个，则将其设置为非活动状态
  if (activeIndex.value !== null && activeIndex.value !== items.value.length - 1) {
    // 这里可以添加逻辑来移除最后一个项的活动类，如果需要的话
  }
  // 设置新的活动项
  activeIndex.value = index;
}