Vueに2枚の画像を1行に表示させる方法

vue で 2 つの画像を 1 行に表示するには、Flex レイアウトを使用できます。フレックス レイアウトは、さまざまな複雑なレイアウト要件を簡単に実装できる、非常に柔軟なレイアウト方法です。

以下では、vue で Flex レイアウトを使用して 2 つの画像を 1 行に表示する方法を紹介します。

1. vue プロジェクトを作成し、必要な依存関係をインストールします

まず、vue-cli を使用してターミナルで vue プロジェクトを作成します。

vue create project-name

次に、で、必要な依存関係をプロジェクトのルート ディレクトリにインストールします。

npm install vue-flexbox --save

2. vue-flexbox コンポーネント ライブラリの紹介

vue-flexbox は、Flex レイアウトに基づく Vue コンポーネント ライブラリです。さまざまなレイアウト効果を簡単に実現できます。プロジェクトに vue-flexbox を導入します。

import VueFlexbox from 'vue-flexbox';

Vue.use(VueFlexbox);

3. vue コンポーネント コードを記述します

vue コンポーネントでは、vue-flexbox のレイアウト コンポーネントを使用して次のことを実現できます。ライン表示 2枚の絵の効果。コードは次のとおりです:

<template>
  <div class="container">
    <vf-layout justify="space-between">
      <vf-layout-item>
        <img src="/path/to/image1.jpg">
      </vf-layout-item>
      <vf-layout-item>
        <img src="/path/to/image2.jpg">
      </vf-layout-item>
    </vf-layout>
  </div>
</template>

<script>
export default {
  name: 'ImageLayout',
}
</script>

<style>
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
</style>

上記のコードでは、ImageLayout という名前の vue コンポーネントを使用し、その中で

npm run serve