How to implement grouped card display in Vue

How to implement grouped card display in Vue

Vue is a popular JavaScript framework for building user interfaces. In Vue, we can use its flexible component system to implement a variety of functions, including grouped card display. This article will introduce how to use Vue to display grouped cards on a web page, and provide detailed code examples.

Step 1: Create project

First, we need to create a new Vue project. Execute the following command in the command line to create a new project using Vue CLI:

vue create card-group-display

Follow the wizard's prompts, select some configuration options, such as project name and default configuration, and wait for the project creation to complete.

Step 2: Create a card component

In Vue, we can create custom components using single-file components. In the src/components directory, create a file named Card.vue and define the components of the grouped cards in it. The following is a basic Card component example:

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

In the above code, we define a Card component that accepts a title attribute as the title of the grouped card and uses slots to receive the card content. .

Step 3: Use Card Component

In App.vue, we can use Card component to display grouped cards. The following is a sample 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>

In the above code, we use three Card components in the App component and pass in different titles and contents. By setting the style of .container, we can make the card appear in different rows on the web page.

Now, we can run the project and see the display effect of the grouped cards. Execute the following command in the command line:

npm run serve

Then visit http://localhost:8080 in the browser to see the display of grouped cards.

Summary

This article introduces how to implement grouped card display in Vue. By creating a Card component and using this component in the App component to display cards in different groups, we can achieve a simple grouped card display effect. I hope this example can help everyone better understand the development and use of Vue components.

The above is the detailed content of How to implement grouped card display in Vue. For more information, please follow other related articles on the PHP Chinese website!