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默认值
