vue实现隔行选中
Vue 实现隔行选中
通过 v-for 循环渲染列表时，结合 :class 动态绑定样式实现隔行选中效果。
模板部分：
<template>
<div>
<ul>
<li
v-for="(item, index) in list"
:key="item.id"
@click="selectItem(index)"
:class="{ 'selected': selectedIndex === index, 'even': index % 2 === 0 }"
>
{{ item.name }}
</li>
</ul>
</div>
</template>脚本部分：
<script>
export default {
data() {
return {
list: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
{ id: 4, name: 'Item 4' }
],
selectedIndex: null
}
},
methods: {
selectItem(index) {
this.selectedIndex = index
}
}
}
</script>样式部分：
<style scoped>
li {
padding: 10px;
cursor: pointer;
}
li.even {
background-color: #f5f5f5;
}
li.selected {
background-color: #42b983;
color: white;
}
</style>实现说明
-
数据绑定
使用v-for循环渲染列表数据，index参数表示当前项的索引。 -
隔行样式
通过index % 2 === 0判断偶数行，动态绑定even类名实现隔行背景色。
-
选中效果
点击列表项时，将当前索引赋值给selectedIndex，动态绑定selected类名高亮选中项。
扩展功能
多选支持
修改 selectedIndex 为数组类型，实现多选功能。
data() {
return {
selectedIndexes: []
}
},
methods: {
selectItem(index) {
const idx = this.selectedIndexes.indexOf(index)
if (idx === -1) {
this.selectedIndexes.push(index)
} else {
this.selectedIndexes.splice(idx, 1)
}
}
}样式调整
修改模板中的 :class 绑定，支持多选高亮。
:class="{ 'selected': selectedIndexes.includes(index), 'even': index % 2 === 0 }"
