如果您想要一个逐个激活的列表样式,您可以使用 Vue 的 v-for 指令和 v-bind:class 指令。

下面是一个使用 Vue 逐个激活列表样式的示例:htmlCopy

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" v-bind:class="{ active: activeIndex === index }" v-on:click="activeIndex = index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
      activeIndex: null
    };
  }
};
</script>

<style>
li.active {
  background-color: blue; /* 设置激活项的背景颜色 */
  color: white; /* 设置激活项的文本颜色 */
}
</style>

在上面的代码中,v-for 指令用于遍历 items 数组中的每个项,并为每个项创建一个 <li> 元素。v-bind:class 指令用于根据 activeIndex 的值动态地为当前激活项添加 active 类。v-on:click 指令用于在单击列表项时更新 activeIndex 的值。

在样式中,您可以使用 .active 类来设置激活项的样式。在上面的示例中,我们将激活项的背景颜色设置为蓝色,将文本颜色设置为白色。您可以根据自己的需求更改这些样式。

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注