vue实现卡片

Vue 实现卡片组件

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

使用原生 HTML 和 CSS

创建一个基本的卡片结构，利用 Vue 的数据绑定和样式控制功能：

<template>
  <div class="card">
    <div class="card-header">
      {{ title }}
    </div>
    <div class="card-body">
      {{ content }}
    </div>
    <div class="card-footer">
      <button @click="handleClick">点击</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    content: String
  },
  methods: {
    handleClick() {
      this.$emit('card-clicked');
    }
  }
};
</script>

<style scoped>
.card {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 16px;
  margin: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.card-header {
  font-weight: bold;
  margin-bottom: 8px;
}
.card-body {
  margin-bottom: 8px;
}
.card-footer {
  text-align: right;
}
</style>

使用 UI 框架（如 Element UI、Vuetify 等）

许多流行的 Vue UI 框架提供了现成的卡片组件：

<template>
  <el-card :header="title">
    {{ content }}
    <template #footer>
      <el-button @click="handleClick">点击</el-button>
    </template>
  </el-card>
</template>

<script>
export default {
  props: {
    title: String,
    content: String
  },
  methods: {
    handleClick() {
      this.$emit('card-clicked');
    }
  }
};
</script>

动态卡片列表

展示一个卡片列表，使用 v-for 指令：

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

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

带交互功能的卡片

实现一个可折叠的卡片：

<template>
  <div class="card">
    <div class="card-header" @click="toggle">
      {{ title }}
      <span>{{ isOpen ? '▲' : '▼' }}</span>
    </div>
    <div class="card-body" v-show="isOpen">
      {{ content }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    content: String
  },
  data() {
    return {
      isOpen: false
    };
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen;
    }
  }
};
</script>

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