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

et limitons la largeur maximale du conteneur en définissant l'attribut .max-width. Dans vf-layout, nous définissons l'attribut justifier sur "space-between", ce qui laisse un espace vide entre les deux éléments vf-layout.

4. Exécutez le projet vue

Enfin, utilisez la commande suivante dans le terminal pour exécuter le projet vue :

npm run serve

Ouvrez le navigateur et visitez http://localhost:8080, vous pouvez voir l'effet de l'affichage de deux images en une seule ligne.

Résumé

Au cours des étapes ci-dessus, nous avons utilisé la mise en page Flex et la bibliothèque de composants vue-flexbox pour obtenir facilement l'effet d'afficher deux images sur une seule ligne. Avec la mise en page Flex, nous pouvons obtenir des mises en page flexibles et personnalisables qui peuvent s'adapter à différents types d'appareils et tailles d'écran.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn