Bagaimana untuk membuat vue memaparkan dua gambar dalam satu baris

Untuk memaparkan dua imej dalam satu baris dalam vue, anda boleh menggunakan reka letak Flex. Susun atur fleksibel ialah kaedah susun atur yang sangat fleksibel yang boleh melaksanakan pelbagai keperluan susun atur kompleks dengan mudah.

Di bawah, saya akan memperkenalkan cara menggunakan reka letak Flex untuk memaparkan dua imej dalam satu baris dalam vue.

1. Buat projek vue dan pasang kebergantungan yang diperlukan

Mula-mula, buat projek vue menggunakan vue-cli dalam terminal:

vue create project-name

Kemudian, pasang kebergantungan yang diperlukan dalam direktori akar projek:

npm install vue-flexbox --save

2. Perkenalkan perpustakaan komponen vue-flexbox

vue-flexbox ialah komponen vue berdasarkan Flex Perpustakaan susun atur, anda boleh mencapai pelbagai kesan susun atur dengan mudah. Perkenalkan vue-flexbox ke dalam projek:

import VueFlexbox from 'vue-flexbox';

Vue.use(VueFlexbox);

3. Tulis kod komponen vue

Dalam komponen vue, anda boleh menggunakan komponen susun atur dalam vue-flexbox untuk mencapai Satu baris menunjukkan kesan dua imej. Kodnya adalah seperti berikut:

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

Dalam kod di atas, kami menggunakan komponen vue bernama ImageLayout, di mana kami mencipta

npm run serve