So bringen Sie Vue dazu, zwei Bilder in einer Zeile anzuzeigen

Um zwei Bilder in einer Zeile in Vue anzuzeigen, können Sie das Flex-Layout verwenden. Flex-Layout ist eine sehr flexible Layout-Methode, mit der verschiedene komplexe Layout-Anforderungen problemlos umgesetzt werden können.

Im Folgenden werde ich vorstellen, wie man das Flex-Layout verwendet, um zwei Bilder in einer Zeile in Vue anzuzeigen.

1. Erstellen Sie ein Vue-Projekt und installieren Sie die erforderlichen Abhängigkeiten.

Erstellen Sie zunächst ein Vue-Projekt mit vue-cli im Terminal:

vue create project-name

Dann installieren Sie die erforderlichen Abhängigkeiten im Projektstammverzeichnis:

npm install vue-flexbox --save

2. Introduce vue -Flexbox-Komponentenbibliothek

vue-flexbox ist eine auf Flex-Layout basierende Vue-Komponentenbibliothek, mit der problemlos verschiedene Layouteffekte erzielt werden können. Führen Sie Vue-Flexbox in das Projekt ein:

import VueFlexbox from 'vue-flexbox';

Vue.use(VueFlexbox);

3. Vue-Komponentencode schreiben

In der Vue-Komponente können Sie die Layoutkomponente in Vue-Flexbox verwenden, um den Effekt zu erzielen, dass zwei Bilder in einer Zeile angezeigt werden. Der Code lautet wie folgt:

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

Im obigen Code verwenden wir eine Vue-Komponente namens ImageLayout, in der wir einen

npm run serve