如果您想要一个逐个激活的列表样式,您可以使用 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
类来设置激活项的样式。在上面的示例中,我们将激活项的背景颜色设置为蓝色,将文本颜色设置为白色。您可以根据自己的需求更改这些样式。