当前位置：首页 > VUE

vue 实现点击选中

2026-01-08 06:10:41VUE

实现点击选中效果

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

方法一：使用v-bind和v-on

通过绑定class和监听click事件来实现选中状态切换。

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

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

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

方法二：使用v-model和单选效果

vue 实现点击选中

适用于需要单选的情况，通常用于列表中选择单个项目。

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

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

方法三：使用计算属性和方法

vue 实现点击选中

更复杂的选中逻辑可以使用计算属性和方法处理。

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

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

方法四：使用自定义指令

对于需要复用的选中逻辑，可以创建自定义指令。

Vue.directive('selectable', {
  bind(el, binding, vnode) {
    el.addEventListener('click', () => {
      el.classList.toggle('selected')
      if (binding.value) {
        binding.value(el.classList.contains('selected'))
      }
    })
  }
})

<template>
  <div v-selectable="handleSelect">
    点击我切换选中状态
  </div>
</template>

<script>
export default {
  methods: {
    handleSelect(isSelected) {
      console.log('当前选中状态:', isSelected)
    }
  }
}
</script>