当前位置：首页 > VUE

vue实现列表点击变色

2026-01-22 02:32:20VUE

实现列表点击变色的方法

在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>