vue memaparkan elemen yang berbeza berdasarkan pilihan yang berbeza

Dengan pembangunan Internet yang berterusan, tapak web dan aplikasi memberi lebih banyak perhatian kepada pengalaman pengguna. Satu aspek penting ialah menjadikan antara muka pengguna lebih peribadi dan fleksibel. Dalam kes ini, pemaparan unsur dinamik menjadi sangat penting. Vue ialah rangka kerja JavaScript popular yang menjadikannya sangat mudah untuk memaparkan elemen secara dinamik. Dalam artikel ini, kita akan mempelajari cara menggunakan Vue untuk memaparkan elemen berbeza berdasarkan pilihan berbeza.

Asas Vue

Sebelum bermula, kita perlu memahami beberapa pengetahuan asas Vue terlebih dahulu. Apa itu Vue? Vue ialah rangka kerja JavaScript moden untuk membina antara muka pengguna. Pada terasnya ialah sistem reaktif yang memudahkan untuk mengikat data ke DOM. Vue menyediakan banyak arahan, komponen dan fungsi kitaran hayat untuk membantu kami mengurus dan mengendalikan DOM dengan lebih mudah.

Dalam aplikasi Vue, data dan paparan terikat antara satu sama lain. Apabila data berubah, paparan berubah dengan sewajarnya. Sistem responsif ini menjadikannya sangat mudah untuk memaparkan elemen secara dinamik. Arahan dalam Vue ialah atribut HTML khas yang mengarahkan Vue cara ia harus mengendalikan elemen DOM.

arahan v-jika

arahan v-jika ialah salah satu arahan yang paling biasa digunakan dalam Vue. Ia digunakan untuk memaparkan elemen secara dinamik berdasarkan keadaan. Sintaks arahan v-if adalah seperti berikut:

<template>
  <div>
    <div v-if="condition1">Content 1</div>
    <div v-if="condition2">Content 2</div>
  </div>
</template>

Dalam kod di atas, kami menggunakan arahan v-if untuk memaparkan kandungan berbeza secara dinamik berdasarkan keadaan berbeza. Apabila syarat1 adalah benar, Kandungan 1 akan dipaparkan; apabila syarat2 adalah benar, Kandungan 2 akan dipaparkan. Jika kedua-dua syarat1 dan syarat2 adalah palsu, maka elemen div tidak akan dipaparkan.

Nota pada arahan v-if

v-if ialah arahan malas. Ini bermakna jika syarat itu palsu, elemen itu tidak akan dipaparkan ke dalam DOM. Ini boleh meningkatkan prestasi jika aplikasi Vue anda mempunyai sejumlah besar elemen yang perlu dipaparkan secara dinamik.

Satu lagi perkara yang perlu diperhatikan ialah v-if boleh digunakan bersama-sama dengan v-else. v-else ialah arahan subsidiari v-if, yang digunakan untuk menghasilkan elemen lain manakala satu elemen diberikan oleh arahan v-if. Arahan v-else mesti ditulis selepas arahan v-if dan pada tahap yang sama.

<template>
  <div>
    <div v-if="condition1">Content 1</div>
    <div v-else-if="condition2">Content 2</div>
    <div v-else>Content 3</div>
  </div>
</template>

Dalam kod di atas, apabila syarat1 adalah benar, Kandungan 1 akan dipaparkan apabila syarat1 adalah palsu dan syarat2 adalah benar, Kandungan 2 akan dipaparkan apabila syarat1 dan syarat2 adalah palsu; dipaparkan Kandungan 3.

arahan v-show

Cara lain untuk memaparkan elemen secara dinamik ialah menggunakan arahan v-show. Arahan v-show adalah serupa dengan arahan v-if, tetapi ia tidak memaparkan elemen secara dinamik dengan mengawal sama ada elemen itu dipaparkan dalam DOM. Sebaliknya, v-show mencapai kawalan dengan menukar paparan sifat CSS elemen. Sintaks arahan

v-show adalah seperti berikut:

<template>
  <div>
    <div v-show="condition1">Content 1</div>
    <div v-show="condition2">Content 2</div>
  </div>
</template>

Jika condition1 adalah benar, maka elemen div pertama akan dipaparkan dan elemen div kedua akan disembunyikan. Jika condition2 adalah benar, maka elemen div kedua akan dipaparkan dan elemen div pertama akan disembunyikan. Jika kedua-dua condition1 dan condition2 adalah palsu, kedua-dua elemen div akan disembunyikan.

Nota pada arahan v-show

Tidak seperti v-if, arahan v-show sentiasa menjadikan elemen ke dalam DOM, tetapi hanya mengawal keterlihatan elemen melalui paparan atribut CSS . Ini bermakna jika terdapat sejumlah besar elemen yang perlu dipaparkan secara dinamik dalam aplikasi Vue, arahan v-show mungkin menjejaskan prestasi.

Satu lagi perkara yang perlu diberi perhatian ialah arahan v-show lebih sesuai untuk elemen yang perlu ditukar dengan kerap. Oleh kerana v-show hanya mengawal keterlihatan elemen dengan menukar sifat CSS, ini lebih pantas daripada v-if. Walau bagaimanapun, untuk elemen yang tidak perlu ditukar dengan kerap, v-if mungkin lebih baik kerana ia boleh mengalih keluar elemen sepenuhnya daripada DOM, sekali gus meningkatkan prestasi.

Ringkasan

Dalam artikel ini, kami mempelajari cara menggunakan Vue untuk memaparkan elemen berbeza berdasarkan pilihan berbeza. Kami belajar tentang arahan v-if dan v-show dan memahami perbezaan dan langkah berjaga-jaga mereka. Bagi pembangun aplikasi Vue, unsur pemaparan secara dinamik adalah sangat penting. Dengan memahami asas Vue, kami boleh melaksanakan elemen yang dipaparkan secara dinamik dengan mudah, dengan itu meningkatkan pengalaman pengguna aplikasi kami.

Atas ialah kandungan terperinci vue memaparkan elemen yang berbeza berdasarkan pilihan yang berbeza. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!