vue实现card的单选

Vue 实现 Card 单选功能

在 Vue 中实现 Card 单选功能可以通过以下方法完成，主要依赖 v-model 和计算属性管理选中状态。

数据绑定与状态管理

定义响应式数据存储当前选中的卡片 ID，使用 v-model 实现双向绑定：

data() {
  return {
    selectedCardId: null,
    cards: [
      { id: 1, title: 'Card 1' },
      { id: 2, title: 'Card 2' }
    ]
  }
}

模板渲染与点击事件

通过 v-for 渲染卡片列表，动态绑定 CSS 类并根据选中状态切换样式：

<template>
  <div class="card-list">
    <div 
      v-for="card in cards" 
      :key="card.id"
      class="card"
      :class="{ 'active': selectedCardId === card.id }"
      @click="selectedCardId = card.id"
    >
      {{ card.title }}
    </div>
  </div>
</template>

样式控制

使用 CSS 高亮选中卡片，增强视觉反馈：

.card {
  border: 1px solid #ddd;
  padding: 16px;
  margin: 8px;
  cursor: pointer;
}
.card.active {
  border-color: #42b983;
  background-color: #f0f9eb;
}

使用计算属性（可选）

如果需要派生状态（如获取选中卡片的完整对象），可添加计算属性：

computed: {
  selectedCard() {
    return this.cards.find(card => card.id === this.selectedCardId)
  }
}

组件化方案（进阶）

对于复杂场景，可将卡片封装为独立组件，通过 props 和 $emit 传递状态：

// CardComponent.vue
props: ['card', 'selected'],
methods: {
  selectCard() {
    this.$emit('select', this.card.id)
  }
}

注意事项

• 确保 card.id 具有唯一性
• 移动端可添加 @touchstart 事件提升响应速度
• 如需初始选中，可在 created 钩子中设置 selectedCardId 默认值