Vueでグループ化されたカード表示を実装する方法

Vue でグループ化されたカード表示を実装する方法

Vue は、ユーザー インターフェイスを構築するための人気のある JavaScript フレームワークです。 Vue では、柔軟なコンポーネント システムを使用して、グループ化されたカードの表示を含むさまざまな機能を実装できます。この記事では、Vue を使用して Web ページ上にグループ化されたカードを表示する方法を紹介し、詳細なコード例を示します。

ステップ 1: プロジェクトの作成

まず、新しい Vue プロジェクトを作成する必要があります。コマンド ラインで次のコマンドを実行して、Vue CLI を使用して新しいプロジェクトを作成します:

vue create card-group-display

ウィザードのプロンプトに従い、プロジェクト名やデフォルト構成などの構成オプションを選択し、プロジェクトの作成が完了するまで待ちます。 。

ステップ 2: カード コンポーネントを作成する

Vue では、単一ファイル コンポーネントを使用してカスタム コンポーネントを作成できます。 src/components ディレクトリに Card.vue という名前のファイルを作成し、その中にグループ化されたカードのコンポーネントを定義します。以下は基本的な Card コンポーネントの例です:

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

上記のコードでは、グループ化されたカードのタイトルとして title 属性を受け入れ、スロットを使用してカードのコンテンツを受け取る Card コンポーネントを定義します。

ステップ 3: カード コンポーネントを使用する

App.vue では、カード コンポーネントを使用してグループ化されたカードを表示できます。以下はサンプル コードです:

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

上記のコードでは、App コンポーネントで 3 つの Card コンポーネントを使用し、異なるタイトルとコンテンツを渡します。 .container のスタイルを設定することで、Web ページ上のさまざまな行にカードを表示できます。

これで、プロジェクトを実行して、グループ化されたカードの表示効果を確認できます。コマンド ラインで次のコマンドを実行します。

npm run serve

次に、ブラウザで http://localhost:8080 にアクセスして、グループ化されたカードの表示を確認します。

概要

この記事では、Vue でグループ化されたカード表示を実装する方法を紹介します。 Card コンポーネントを作成し、このコンポーネントを App コンポーネントで使用してカードをさまざまなグループに表示することで、単純なグループ化されたカード表示効果を実現できます。この例が、誰もが Vue コンポーネントの開発と使用をより深く理解するのに役立つことを願っています。

以上がVueでグループ化されたカード表示を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。