vue实现列表点击变色
实现列表点击变色的方法
在Vue中实现列表点击变色功能，可以通过动态绑定class或style来实现。以下是几种常见的实现方式：
方法一：使用动态class绑定
<template>
<ul>
<li
v-for="(item, index) in list"
:key="index"
@click="activeIndex = index"
:class="{ 'active': activeIndex === index }"
>
{{ item }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
list: ['Item 1', 'Item 2', 'Item 3'],
activeIndex: -1
}
}
}
</script>
<style>
.active {
background-color: #42b983;
color: white;
}
</style>方法二：使用动态style绑定
<template>
<ul>
<li
v-for="(item, index) in list"
:key="index"
@click="activeIndex = index"
:style="activeIndex === index ? activeStyle : {}"
>
{{ item }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
list: ['Item 1', 'Item 2', 'Item 3'],
activeIndex: -1,
activeStyle: {
backgroundColor: '#42b983',
color: 'white'
}
}
}
}
</script>方法三：使用对象数组存储选中状态
<template>
<ul>
<li
v-for="(item, index) in list"
:key="index"
@click="toggleActive(index)"
:class="{ 'active': item.isActive }"
>
{{ item.text }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
list: [
{ text: 'Item 1', isActive: false },
{ text: 'Item 2', isActive: false },
{ text: 'Item 3', isActive: false }
]
}
},
methods: {
toggleActive(index) {
this.list.forEach((item, i) => {
item.isActive = i === index
})
}
}
}
</script>方法四：支持多选功能
如果需要实现多选功能，可以修改为以下代码：
<template>
<ul>
<li
v-for="(item, index) in list"
:key="index"
@click="toggleActive(index)"
:class="{ 'active': item.isActive }"
>
{{ item.text }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
list: [
{ text: 'Item 1', isActive: false },
{ text: 'Item 2', isActive: false },
{ text: 'Item 3', isActive: false }
]
}
},
methods: {
toggleActive(index) {
this.list[index].isActive = !this.list[index].isActive
}
}
}
</script>注意事项
- 根据需求选择单选或多选功能
- 样式可以根据项目需求自定义
- 对于大型列表，建议使用对象ID而不是索引作为key
- 可以使用CSS过渡效果增强用户体验
以上方法都可以实现列表点击变色效果，选择哪种方法取决于具体项目需求和复杂度。
