vue 实现点击选中

Vue 实现点击选中功能

在 Vue 中实现点击选中功能可以通过多种方式完成，以下是几种常见的方法：

方法一：使用 v-model 和 v-bind:class

通过绑定 class 来实现选中样式变化。

<template>
  <div>
    <div
      v-for="item in items"
      :key="item.id"
      @click="selectedItem = item.id"
      :class="{ 'selected': selectedItem === item.id }"
    >
      {{ item.text }}
    </div>
  </div>
</template>

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

<style>
.selected {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}
</style>

方法二：使用计算属性

通过计算属性动态判断是否选中。

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ],
      selectedItem: null
    };
  },
  methods: {
    toggleSelect(id) {
      this.selectedItem = id;
    }
  },
  computed: {
    isSelected() {
      return (id) => ({
        selected: this.selectedItem === id
      });
    }
  }
};
</script>

<style>
.selected {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}
</style>

方法三：使用数组存储多个选中项

如果需要支持多选，可以通过数组存储选中项。

<template>
  <div>
    <div
      v-for="item in items"
      :key="item.id"
      @click="toggleMultiSelect(item.id)"
      :class="{ 'selected': selectedItems.includes(item.id) }"
    >
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ],
      selectedItems: []
    };
  },
  methods: {
    toggleMultiSelect(id) {
      const index = this.selectedItems.indexOf(id);
      if (index === -1) {
        this.selectedItems.push(id);
      } else {
        this.selectedItems.splice(index, 1);
      }
    }
  }
};
</script>

<style>
.selected {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}
</style>

方法四：使用 Vuex 管理选中状态

如果项目中使用 Vuex，可以通过全局状态管理选中项。

// store.js
export default new Vuex.Store({
  state: {
    selectedItem: null
  },
  mutations: {
    setSelectedItem(state, payload) {
      state.selectedItem = payload;
    }
  }
});

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ]
    };
  }
};
</script>

<style>
.selected {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}
</style>

以上方法可以根据具体需求选择适合的实现方式。