Cara melaksanakan paparan kad berkumpulan dalam Vue

Cara melaksanakan paparan kad berkumpulan dalam Vue

Vue ialah rangka kerja JavaScript yang popular untuk membina antara muka pengguna. Dalam Vue, kami boleh menggunakan sistem komponen fleksibelnya untuk melaksanakan pelbagai fungsi, termasuk paparan kad berkumpulan. Artikel ini akan memperkenalkan cara menggunakan Vue untuk memaparkan kad berkumpulan pada halaman web dan memberikan contoh kod terperinci.

Langkah 1: Buat Projek

Mula-mula, kita perlu mencipta projek Vue baharu. Jalankan arahan berikut dalam baris arahan untuk mencipta projek baharu menggunakan Vue CLI:

vue create card-group-display

Ikut gesaan wizard, pilih beberapa pilihan konfigurasi seperti nama projek dan konfigurasi lalai, dan tunggu penciptaan projek selesai.

Langkah 2: Cipta komponen kad

Dalam Vue, kami boleh mencipta komponen tersuai menggunakan komponen fail tunggal. Dalam direktori src/komponen, cipta fail bernama Card.vue dan tentukan komponen kad terkumpul di dalamnya. Berikut ialah contoh komponen Kad asas:

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

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

<style scoped>
.card {
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 10px;
}

.card-header {
  background-color: #eee;
  padding: 10px;
}

.card-body {
  padding: 10px;
}
</style>

Dalam kod di atas, kami mentakrifkan komponen Kad yang menerima atribut tajuk sebagai tajuk kad yang dikumpulkan dan menggunakan slot untuk menerima kandungan kad.

Langkah 3: Gunakan Komponen Kad

Dalam App.vue, kita boleh menggunakan komponen Kad untuk memaparkan kad berkumpulan. Berikut ialah contoh kod:

<template>
  <div id="app">
    <div class="container">
      <Card title="分组1">
        <div class="content">这是分组1的内容</div>
      </Card>

      <Card title="分组2">
        <div class="content">这是分组2的内容</div>
      </Card>

      <Card title="分组3">
        <div class="content">这是分组3的内容</div>
      </Card>
    </div>
  </div>
</template>

<script>
import Card from './components/Card'

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

<style>
.container {
  display: flex;
  flex-wrap: wrap;
}
</style>

Dalam kod di atas, kami menggunakan tiga komponen Kad dalam komponen Apl dan menghantar tajuk dan kandungan yang berbeza. Dengan menetapkan gaya .container, kami boleh membuat kad muncul dalam baris yang berbeza pada halaman web.

Kini, kami boleh menjalankan projek dan melihat kesan paparan kad yang dikumpulkan. Jalankan arahan berikut dalam baris arahan:

npm run serve

Kemudian lawati http://localhost:8080 dalam pelayar untuk melihat paparan kad berkumpulan.

Ringkasan

Artikel ini memperkenalkan cara melaksanakan paparan kad berkumpulan dalam Vue. Dengan mencipta komponen Kad dan menggunakannya dalam komponen Apl untuk memaparkan kad dalam kumpulan yang berbeza, kami boleh mencapai kesan paparan kad berkumpulan yang mudah. Saya harap contoh ini dapat membantu semua orang memahami dengan lebih baik pembangunan dan penggunaan komponen Vue.

Atas ialah kandungan terperinci Cara melaksanakan paparan kad berkumpulan dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!