Vueに2枚の画像を1行に表示させる方法-フロントエンドQ&A-php.cn

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

PHPz

リリース： 2023-04-12 13:38:51

オリジナル

1503 人が閲覧しました

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

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

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

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

vue create project-name

ログイン後にコピー

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

npm install vue-flexbox --save

ログイン後にコピー

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

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

import VueFlexbox from 'vue-flexbox';

Vue.use(VueFlexbox);

ログイン後にコピー

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 コンポーネントを使用し、その中で

コンテナを作成し、.max- を設定することでコンテナの最大サイズを制限します。 width 属性の幅。 vf-layout では、justify 属性を「space-between」に設定します。これにより、2 つの vf-layout-item の間に空白スペースが残ります。