Comment implémenter l'affichage de cartes groupées dans Vue

Comment implémenter l'affichage de cartes groupées dans Vue

Vue est un framework JavaScript populaire pour créer des interfaces utilisateur. Dans Vue, nous pouvons utiliser son système de composants flexible pour implémenter diverses fonctions, notamment l'affichage de cartes groupées. Cet article expliquera comment utiliser Vue pour afficher des cartes groupées sur une page Web et fournira des exemples de code détaillés.

Étape 1 : Créer un projet

Tout d'abord, nous devons créer un nouveau projet Vue. Exécutez la commande suivante dans la ligne de commande pour créer un nouveau projet à l'aide de Vue CLI :

vue create card-group-display

Suivez les invites de l'assistant, sélectionnez certaines options de configuration telles que le nom du projet et la configuration par défaut, et attendez la fin de la création du projet.

Étape 2 : Créer un composant de carte

Dans Vue, nous pouvons créer des composants personnalisés à l'aide de composants à fichier unique. Dans le répertoire src/components, créez un fichier nommé Card.vue et définissez les composants des cartes regroupées qu'il contient. Voici un exemple de composant Card de base :

<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>

Dans le code ci-dessus, nous définissons un composant Card qui accepte un attribut title comme titre de la carte groupée et utilise des emplacements pour recevoir le contenu de la carte.

Étape 3 : Utiliser le composant Card

Dans App.vue, nous pouvons utiliser le composant Card pour afficher des cartes groupées. Voici un exemple de code :

<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>

Dans le code ci-dessus, nous avons utilisé trois composants Card dans le composant App et transmis différents titres et contenus. En définissant le style de .container, nous pouvons faire apparaître la carte dans différentes lignes sur la page Web.

Maintenant, nous pouvons exécuter le projet et voir l'effet d'affichage des cartes groupées. Exécutez la commande suivante dans la ligne de commande :

npm run serve

Visitez ensuite http://localhost:8080 dans le navigateur pour voir l'affichage des cartes groupées.

Résumé

Cet article présente comment implémenter l'affichage de cartes groupées dans Vue. En créant un composant Card et en utilisant ce composant dans le composant App pour afficher les cartes dans différents groupes, nous pouvons obtenir un simple effet d'affichage de cartes groupées. J'espère que cet exemple pourra aider tout le monde à mieux comprendre le développement et l'utilisation des composants Vue.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!