vue写一个card卡片

好的，下面是一个简单的 Vue 卡片组件示例：

<template>
  <div class="card">
    <img :src="image" alt="Card image">
    <div class="card-body">
      <h5 class="card-title">{{ title }}</h5>
      <p class="card-text">{{ description }}</p>
      <a :href="link" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Card',
  props: {
    title: String,
    description: String,
    image: String,
    link: String,
  },
};
</script>

<style scoped>
.card {
  width: 18rem;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.card-body {
  padding: 1rem;
}

.card-title {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.card-text {
  font-size: 1rem;
  color: #6c757d;
  margin-bottom: 1rem;
}

.btn-primary {
  background-color: #007bff;
  border-color: #007bff;
  color: #fff;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  text-decoration: none;
}

.btn-primary:hover {
  background-color: #0069d9;
  border-color: #0062cc;
}
</style>

你可以在父组件中这样使用它：

<template>
  <div>
    <Card
      title="Vue 卡片组件"
      description="一个简单的 Vue 卡片组件示例"
      image="https://via.placeholder.com/286x180"
      link="https://www.example.com/"
    />
  </div>
</template>

<script>
import Card from './Card.vue';

export default {
  name: 'App',
  components: {
    Card,
  },
};
</script>

这个示例会生成一个具有标题、描述、图片和链接的卡片。你可以根据你的需要进行更改和定制。