Rumah  >  Artikel  >  hujung hadapan web  >  Apakah tiga cara untuk melaksanakan tab dalam Vue?

Apakah tiga cara untuk melaksanakan tab dalam Vue?

藏色散人
藏色散人asal
2023-01-29 14:49:392292semak imbas

Vue melaksanakan tab dalam tiga cara: 1. Kawal penukaran kandungan tab melalui "v-show"; 2. Laksanakan penukaran tab melalui cache "keep-alive" dalam Vue; "-link" untuk melaksanakan penukaran penghalaan.

Apakah tiga cara untuk melaksanakan tab dalam Vue?

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi vue3, komputer DELL G3

Apakah tiga cara untuk laksanakan tab dalam vue?

3 cara untuk vue melaksanakan penukaran tab dan penukaran untuk mengekalkan status data

3 cara untuk vue melaksanakan penukaran tab

1. tunjukkan Kawal penukaran kandungan

1 Prinsip versi mudah: Gunakan peristiwa klik untuk menukar nilai num sebagai suis untuk mengawal gaya tab dan paparan kandungan serta penyembunyian.

Apakah tiga cara untuk melaksanakan tab dalam Vue?

2. Prinsip pemaparan data: dikawal terutamanya oleh indeks yang diikat oleh v-for, sama seperti di atas.

Apakah tiga cara untuk melaksanakan tab dalam Vue?

2. Pensuisan komponen.

1. Titik pengetahuan terutamanya adalah ciri-ciri is in vue, dan keep-alive cache

Apakah tiga cara untuk melaksanakan tab dalam Vue?

3. Pertukaran laluan. (Mesra untuk bar alamat dan permintaan data)

Dicapai melalui pautan penghala.

Apakah tiga cara untuk melaksanakan tab dalam Vue?

Penukaran tab Vue mengekalkan keadaan data

Apabila halaman melakukan penukaran tab, memandangkan komponen akan dibuat semula setiap masa komponen ditukar, kami Jika anda mahu kandungan dalam tab kekal segar tidak kira bagaimana halaman itu ditukar, mengurangkan pemaparan semula halaman dan permintaan

Kaedah pelaksanaan: gunakan < ;/keep-alive> komponen pakej

<el-tabs v-model="activeName" @tab-click="handleClick">
  <el-tab-pane label="记录">
    <keep-alive>
      <child1 v-if="isChildUpdate"></child1>
    </keep-alive>
  </el-tab-pane>
</el-tabs>

Butiran lompat halaman senarai, halaman senarai mengekalkan status operasi terakhir

Ini dicapai dengan sama ada untuk memuatkan penghala -lihat dan halakan halaman tetapan meta meta sama ada halaman itu perlu dicache

Apakah tiga cara untuk melaksanakan tab dalam Vue?

Jika paparan penghala bersarang dalam berbilang lapisan, anda mungkin perlu sediakan berbilang lapisan, dan kemudian dengar laluan keluar sebelumRouteLeave, dan tetapkan sama ada untuk cache

Apakah tiga cara untuk melaksanakan tab dalam Vue?

//Melompat dari halaman lain tidak memerlukan caching daripada halaman butiran memerlukan caching

Pembelajaran yang disyorkan: "tutorial video vue

Atas ialah kandungan terperinci Apakah tiga cara untuk melaksanakan tab dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn