Bagaimana untuk membuat vue memaparkan dua gambar dalam satu baris-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk membuat vue memaparkan dua gambar dalam satu baris

PHPz

Lepaskan： 2023-04-12 13:38:51

asal

1503 orang telah melayarinya

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.

Buat projek vue dan pasang kebergantungan yang diperlukan

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

vue create project-name

Salin selepas log masuk

Kemudian, pasang kebergantungan yang diperlukan dalam direktori akar projek:

npm install vue-flexbox --save

Salin selepas log masuk

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

Salin selepas log masuk

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>

Salin selepas log masuk

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

dan mengehadkan bekas dengan menetapkan atribut .max-width lebar maksimum. Dalam reka letak vf, kami menetapkan atribut justify kepada "ruang-antara", yang meninggalkan ruang kosong antara dua item vf-layout.

Jalankan projek vue

Akhir sekali, gunakan arahan berikut dalam terminal untuk menjalankan projek vue:

npm run serve

Salin selepas log masuk

Buka penyemak imbas dan layari http:// /localhost:8080, anda boleh lihat kesan paparan dua gambar dalam satu baris.

Ringkasan

Melalui langkah di atas, kami menggunakan reka letak Flex dan perpustakaan komponen vue-flexbox untuk mencapai kesan memaparkan dua gambar dalam satu baris dengan mudah. Dengan reka letak Flex, kami boleh mencapai reka letak yang fleksibel dan boleh disesuaikan yang boleh menyesuaikan diri dengan jenis peranti dan saiz skrin yang berbeza.

Atas ialah kandungan terperinci Bagaimana untuk membuat vue memaparkan dua gambar dalam satu baris. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!