Comment faire en sorte que Vue affiche deux images sur une seule ligne

Pour afficher deux images sur une ligne dans la vue, vous pouvez utiliser la disposition Flex. La mise en page flexible est une méthode de mise en page très flexible qui peut facilement mettre en œuvre diverses exigences de mise en page complexes.

Ci-dessous, je vais vous présenter comment utiliser la disposition Flex pour afficher deux images sur une ligne en vue.

1. Créez un projet vue et installez les dépendances requises

Tout d'abord, créez un projet vue en utilisant vue-cli dans le terminal :

vue create project-name

Ensuite, installez les dépendances requises dans le répertoire racine du projet :

npm install vue-flexbox --save

2. Introduisez vue -Bibliothèque de composants Flexbox

vue-flexbox est une bibliothèque de composants vue basée sur la mise en page Flex, qui peut facilement obtenir divers effets de mise en page. Introduisez vue-flexbox dans le projet :

import VueFlexbox from 'vue-flexbox';

Vue.use(VueFlexbox);

3. Écrivez le code du composant vue

Dans le composant vue, vous pouvez utiliser le composant de mise en page dans vue-flexbox pour obtenir l'effet d'afficher deux images sur une seule ligne. Le code est le suivant :

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

Dans le code ci-dessus, nous utilisons un composant vue nommé ImageLayout, dans lequel nous créons un conteneur

npm run serve