vue实现选中状态

Vue 实现选中状态的方法

使用 v-bind:class 动态绑定类名

通过 v-bind:class 绑定一个对象，根据条件动态切换类名。例如，当 isSelected 为 true 时，添加 selected 类：

<template>
  <div 
    :class="{ selected: isSelected }"
    @click="isSelected = !isSelected"
  >
    点击切换选中状态
  </div>
</template>

<script>
export default {
  data() {
    return {
      isSelected: false
    };
  }
};
</script>

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

使用 v-model 绑定表单元素

对于复选框或单选按钮，可以直接使用 v-model 绑定选中状态：

<template>
  <input type="checkbox" v-model="isChecked" />
  <label>选中状态：{{ isChecked }}</label>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false
    };
  }
};
</script>

列表项的选中状态

在列表中实现单选或多选状态，可以通过维护一个数组或变量存储选中项：

<template>
  <ul>
    <li 
      v-for="item in items" 
      :key="item.id"
      :class="{ selected: selectedItem === item.id }"
      @click="selectedItem = item.id"
    >
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' }
      ],
      selectedItem: null
    };
  }
};
</script>

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

对于复杂逻辑，可以使用计算属性动态判断选中状态：

<template>
  <button :class="{ active: isActive }" @click="toggleActive">
    按钮状态：{{ isActive ? '选中' : '未选中' }}
  </button>
</template>

<script>
export default {
  data() {
    return {
      active: false
    };
  },
  computed: {
    isActive() {
      return this.active;
    }
  },
  methods: {
    toggleActive() {
      this.active = !this.active;
    }
  }
};
</script>

使用 Vuex 管理全局选中状态

对于跨组件共享的选中状态，可以通过 Vuex 集中管理：

// store.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    selectedItems: []
  },
  mutations: {
    toggleSelection(state, itemId) {
      const index = state.selectedItems.indexOf(itemId);
      if (index === -1) {
        state.selectedItems.push(itemId);
      } else {
        state.selectedItems.splice(index, 1);
      }
    }
  }
});

<template>
  <div 
    v-for="item in items"
    :key="item.id"
    :class="{ selected: $store.state.selectedItems.includes(item.id) }"
    @click="$store.commit('toggleSelection', item.id)"
  >
    {{ item.name }}
  </div>
</template>

以上方法覆盖了从简单到复杂的选中状态实现场景，可根据实际需求选择合适的方式。