Sidebar Vuejs中"li“的活动类

在Vue.js中，侧边栏（Sidebar）通常是一个常见的UI组件，用于显示导航链接或其他可点击的元素。当用户点击某个<li>元素时，通常会添加一个活动类（active class）来表示当前选中的状态。

基础概念

活动类是一个CSS类，它会被添加到当前选中的<li>元素上，以便通过CSS样式来突出显示该元素。在Vue.js中，你可以使用v-bind:class或简写为:class来动态绑定类。

类型

活动类的类型通常是根据具体的应用场景来定义的，例如：

active：表示当前选中的菜单项。
inactive：表示未选中的菜单项。

应用场景

导航菜单：在侧边栏或顶部导航栏中，用于指示当前激活的页面。
步骤指示器：在多步骤表单或流程中，用于标记当前完成的步骤。

示例代码

以下是一个简单的Vue 3示例，展示了如何在侧边栏中动态添加活动类：

<template>
  <ul class="sidebar">
    <li
      v-for="(item, index) in menuItems"
      :key="index"
      :class="{ active: activeIndex === index }"
      @click="setActive(index)"
    >
      {{ item.name }}
    </li>
  </ul>
</template>

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

export default {
  setup() {
    const menuItems = ref([
      { name: 'Home' },
      { name: 'About' },
      { name: 'Contact' }
    ]);
    const activeIndex = ref(0);

    function setActive(index) {
      activeIndex.value = index;
    }

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

<style>
.sidebar li.active {
  background-color: #f0f0f0;
  font-weight: bold;
}
</style>