vue2.0 实现选中

Vue 2.0 实现选中功能

在 Vue 2.0 中实现选中功能可以通过多种方式完成，以下介绍几种常见的方法。

使用 v-model 绑定单选或多选

对于单选或多选场景，可以直接使用 v-model 绑定数据。

单选示例：

<template>
  <div>
    <input type="radio" id="option1" value="Option 1" v-model="selectedOption">
    <label for="option1">Option 1</label>
    <input type="radio" id="option2" value="Option 2" v-model="selectedOption">
    <label for="option2">Option 2</label>
    <p>Selected: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: ''
    };
  }
};
</script>

多选示例：

<template>
  <div>
    <input type="checkbox" id="option1" value="Option 1" v-model="selectedOptions">
    <label for="option1">Option 1</label>
    <input type="checkbox" id="option2" value="Option 2" v-model="selectedOptions">
    <label for="option2">Option 2</label>
    <p>Selected: {{ selectedOptions }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: []
    };
  }
};
</script>

动态高亮选中项

对于列表或表格中的选中项高亮，可以通过动态绑定 class 或 style 实现。

示例：

<template>
  <div>
    <ul>
      <li
        v-for="item in items"
        :key="item.id"
        @click="selectItem(item)"
        :class="{ 'active': selectedItem === item }"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ],
      selectedItem: null
    };
  },
  methods: {
    selectItem(item) {
      this.selectedItem = item;
    }
  }
};
</script>

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

使用计算属性处理选中逻辑

如果需要复杂的选中逻辑，可以使用计算属性动态判断选中状态。

示例：

<template>
  <div>
    <button
      v-for="item in items"
      :key="item.id"
      @click="toggleSelect(item)"
      :class="{ 'selected': isSelected(item) }"
    >
      {{ item.name }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ],
      selectedItems: []
    };
  },
  methods: {
    toggleSelect(item) {
      const index = this.selectedItems.findIndex(selected => selected.id === item.id);
      if (index === -1) {
        this.selectedItems.push(item);
      } else {
        this.selectedItems.splice(index, 1);
      }
    },
    isSelected(item) {
      return this.selectedItems.some(selected => selected.id === item.id);
    }
  }
};
</script>

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

结合 Vuex 管理选中状态

如果应用状态较为复杂，可以使用 Vuex 集中管理选中状态。

示例：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    selectedItems: []
  },
  mutations: {
    toggleSelect(state, item) {
      const index = state.selectedItems.findIndex(selected => selected.id === item.id);
      if (index === -1) {
        state.selectedItems.push(item);
      } else {
        state.selectedItems.splice(index, 1);
      }
    }
  },
  getters: {
    isSelected: state => item => {
      return state.selectedItems.some(selected => selected.id === item.id);
    }
  }
});

组件中使用：

<template>
  <div>
    <button
      v-for="item in items"
      :key="item.id"
      @click="toggleSelect(item)"
      :class="{ 'selected': isSelected(item) }"
    >
      {{ item.name }}
    </button>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';

export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    };
  },
  computed: {
    ...mapGetters(['isSelected'])
  },
  methods: {
    ...mapMutations(['toggleSelect'])
  }
};
</script>

以上方法可以根据实际需求灵活选择，实现选中功能。