当前位置：首页 > VUE

vue实现卡片

2026-01-13 23:56:15VUE

Vue实现卡片的基本方法

使用Vue实现卡片组件可以通过多种方式，以下是几种常见的方法：

使用原生HTML和CSS结合Vue数据绑定

<template>
  <div class="card">
    <div class="card-header">
      {{ title }}
    </div>
    <div class="card-body">
      {{ content }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    content: String
  }
}
</script>

<style scoped>
.card {
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  width: 300px;
}
.card-header {
  padding: 10px 15px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
}
.card-body {
  padding: 15px;
}
</style>

使用UI框架（如Element UI）

如果项目中使用Element UI，可以直接使用其Card组件：

<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>{{ title }}</span>
    </div>
    <div v-for="item in contentList" :key="item" class="text item">
      {{ item }}
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      title: '卡片标题',
      contentList: ['内容1', '内容2', '内容3']
    }
  }
}
</script>

卡片的高级功能实现

可交互卡片

实现可点击、悬停效果的卡片：

<template>
  <div 
    class="interactive-card"
    @click="handleClick"
    @mouseover="isHovered = true"
    @mouseleave="isHovered = false"
    :class="{ 'hovered': isHovered }"
  >
    <h3>{{ title }}</h3>
    <p>{{ description }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isHovered: false
    }
  },
  props: {
    title: String,
    description: String
  },
  methods: {
    handleClick() {
      this.$emit('card-clicked', this.title)
    }
  }
}
</script>

<style scoped>
.interactive-card {
  transition: all 0.3s ease;
  cursor: pointer;
}
.interactive-card.hovered {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
</style>

卡片列表的实现

使用v-for渲染多个卡片

<template>
  <div class="card-list">
    <CardComponent 
      v-for="(card, index) in cards" 
      :key="index"
      :title="card.title"
      :content="card.content"
    />
  </div>
</template>

<script>
import CardComponent from './CardComponent.vue'

export default {
  components: {
    CardComponent
  },
  data() {
    return {
      cards: [
        { title: '卡片1', content: '内容1' },
        { title: '卡片2', content: '内容2' },
        { title: '卡片3', content: '内容3' }
      ]
    }
  }
}
</script>

<style scoped>
.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}
</style>

卡片动画效果

添加过渡动画

<template>
  <transition name="fade">
    <div class="animated-card" v-if="show">
      <h3>{{ title }}</h3>
      <p>{{ content }}</p>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    title: String,
    content: String,
    show: Boolean
  }
}
</script>

<style scoped>
.animated-card {
  transition: all 0.5s;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

这些方法涵盖了从基础到高级的Vue卡片实现方式，可以根据项目需求选择合适的实现方案。

vue实现卡片