Comment faire en sorte que Vue affiche deux images sur une seule ligne-Questions et réponses frontales-php.cn

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

PHPz

Libérer： 2023-04-12 13:38:51

original

1504 Les gens l'ont consulté

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.

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

Copier après la connexion

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

npm install vue-flexbox --save

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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.

Exécutez le projet vue

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

npm run serve

Copier après la connexion

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!