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

在Vue中，你可以使用v-bind:class（或简写为:class）来动态地绑定一个或多个类名。如果你想要在点击时添加一个活动类，并从最后一个元素中删除它，你可以通过维护一个状态来实现这个功能。

以下是一个简单的例子，展示了如何在Vue 3中实现这个功能：

<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>

在这个例子中，我们使用了Vue 3的Composition API。activeIndex是一个响应式引用，用来跟踪当前活动的项的索引。:class指令用于动态绑定类名，当activeIndex等于当前项的索引时，active类会被添加到该项上。

点击任何一个列表项时，setActive函数会被调用，并更新activeIndex的值。这样，只有当前点击的项会有active类，而其他项则不会有。

如果你想要在添加新活动项的同时从最后一个项中删除活动类，你可以在setActive函数中添加逻辑来处理这个需求。例如：

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

在这个例子中，我们没有显式地从最后一个项中移除活动类，因为一旦activeIndex更新为新的索引，旧的索引对应的项会自动失去active类。如果你有特殊的逻辑需要处理，你可以根据具体需求来调整setActive函数。

这个例子展示了如何在Vue中动态绑定类名，并在点击事件中更新状态。这种方法可以很容易地扩展到更复杂的场景，比如列表项的嵌套或者其他交互逻辑。