当前位置：首页 > VUE

vue实现点击选中列表

2026-02-25 06:52:28VUE

实现点击选中列表

在Vue中实现点击选中列表的功能，可以通过v-for指令渲染列表，结合v-bind:class或v-model动态绑定选中状态。以下是两种常见实现方式：

基础实现（单选）

<template>
  <ul>
    <li 
      v-for="(item, index) in list" 
      :key="index"
      @click="selectItem(index)"
      :class="{ 'active': selectedIndex === index }"
    >
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: 'Item 1' },
        { name: 'Item 2' },
        { name: 'Item 3' }
      ],
      selectedIndex: null
    }
  },
  methods: {
    selectItem(index) {
      this.selectedIndex = index
    }
  }
}
</script>

<style>
.active {
  background-color: #f0f0f0;
  color: #42b983;
}
</style>

多选实现

<template>
  <ul>
    <li 
      v-for="(item, index) in list" 
      :key="index"
      @click="toggleSelect(index)"
      :class="{ 'active': selectedItems.includes(index) }"
    >
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: 'Item 1' },
        { name: 'Item 2' },
        { name: 'Item 3' }
      ],
      selectedItems: []
    }
  },
  methods: {
    toggleSelect(index) {
      const idx = this.selectedItems.indexOf(index)
      if (idx > -1) {
        this.selectedItems.splice(idx, 1)
      } else {
        this.selectedItems.push(index)
      }
    }
  }
}
</script>

使用计算属性优化

对于复杂场景，可以使用计算属性管理选中状态：

vue实现点击选中列表

<template>
  <ul>
    <li 
      v-for="(item, index) in list" 
      :key="item.id"
      @click="selectedId = item.id"
      :class="{ 'active': selectedId === item.id }"
    >
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ],
      selectedId: null
    }
  }
}
</script>