当前位置：首页 > VUE

vue实现card的单选

2026-02-23 00:27:34VUE

实现 Vue Card 单选功能

在 Vue 中实现 Card 单选功能可以通过以下方式完成，这里以 Vue 3 的 Composition API 为例。

数据绑定与状态管理

使用 ref 或 reactive 创建响应式数据存储当前选中的卡片 ID，并通过 v-model 或 :class 动态绑定选中状态。

<script setup>
import { ref } from 'vue';

const cards = [
  { id: 1, title: 'Card 1' },
  { id: 2, title: 'Card 2' },
  { id: 3, title: 'Card 3' }
];
const selectedCardId = ref(null);

const selectCard = (id) => {
  selectedCardId.value = id;
};
</script>

模板渲染与交互

通过 v-for 渲染卡片列表，根据 selectedCardId 动态添加选中样式，并通过 @click 触发选择逻辑。

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

样式控制

通过 CSS 定义卡片的基础样式和选中状态的高亮效果。

<style scoped>
.card {
  border: 1px solid #ddd;
  padding: 20px;
  margin: 10px;
  cursor: pointer;
  transition: all 0.3s;
}

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

使用单选框的替代方案

如果需要更严格的表单行为，可以用 <input type="radio"> 结合透明化样式实现。

vue实现card的单选

<template>
  <div class="radio-card-group">
    <label 
      v-for="card in cards" 
      :key="card.id"
      class="radio-card"
    >
      <input 
        type="radio" 
        :value="card.id"
        v-model="selectedCardId"
        hidden
      >
      <div class="card-content">
        {{ card.title }}
      </div>
    </label>
  </div>
</template>