Vue实现列表选择变色

Vue实现列表选择变色

在Vue中实现列表选择变色可以通过多种方式完成，以下是几种常见的方法：

使用v-bind动态绑定class

通过v-bind:class动态绑定类名，根据当前选中项的状态切换样式类。

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

<script>
export default {
  data() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3'],
      selectedIndex: -1
    }
  }
}
</script>

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

使用v-bind动态绑定style

通过v-bind:style直接绑定内联样式，动态修改元素的样式属性。

<template>
  <ul>
    <li 
      v-for="(item, index) in list" 
      :key="index"
      @click="selectedIndex = index"
      :style="{ backgroundColor: selectedIndex === index ? '#42b983' : '', color: selectedIndex === index ? 'white' : '' }"
    >
      {{ item }}
    </li>
  </ul>
</template>

使用计算属性管理选中状态

对于更复杂的逻辑，可以使用计算属性来管理选中状态。

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

<script>
export default {
  data() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3'],
      selectedIndex: -1
    }
  },
  methods: {
    selectItem(index) {
      this.selectedIndex = index;
    }
  },
  computed: {
    getItemClass() {
      return function(index) {
        return {
          'active': this.selectedIndex === index,
          'disabled': index === 1 // 示例：可以添加其他条件
        };
      };
    }
  }
}
</script>

<style>
.active {
  background-color: #42b983;
  color: white;
}
.disabled {
  opacity: 0.5;
}
</style>

使用Vuex管理状态

在大型应用中，可以使用Vuex来集中管理选中状态。

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

<script>
export default {
  data() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3']
    }
  },
  methods: {
    selectItem(index) {
      this.$store.commit('setSelectedIndex', index);
    }
  }
}
</script>

使用第三方库

对于更复杂的交互，可以使用第三方库如vue-draggable或vuelidate来增强功能。

<template>
  <draggable v-model="list" @end="onDragEnd">
    <li 
      v-for="(item, index) in list" 
      :key="index"
      @click="selectedIndex = index"
      :class="{ 'active': selectedIndex === index }"
    >
      {{ item }}
    </li>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';
export default {
  components: { draggable },
  data() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3'],
      selectedIndex: -1
    }
  },
  methods: {
    onDragEnd() {
      console.log('List reordered');
    }
  }
}
</script>

以上方法可以根据实际需求选择使用，动态绑定class或style是最简单直接的方式，而计算属性和Vuex适用于更复杂的场景。