Cara Mengendalikan Rendering Bersyarat di Vue
VUE menyediakan V-IF, V-ELSE-IF, V-ELSE dan V-SHOW untuk mengendalikan rendering bersyarat; 1. Gunakan V-IF, V-ELSE-IF dan V-ELSE untuk mengawal rendering elemen berdasarkan nilai sebenar dan palsu ungkapan. V-IF adalah keadaan awal, V-ELSE-IF digunakan untuk penghakiman pelbagai syarat, V-ELSE diletakkan terakhir tanpa ekspresi, arahan ini mesti digunakan secara berterusan pada unsur-unsur tahap yang sama; 2. V-show menukar penglihatan elemen melalui atribut paparan CSS, dan unsur-unsur sentiasa wujud di DOM, sesuai untuk senario beralih yang kerap; 3. Perbezaan teras antara V-If dan V-Show ialah V-jika rendering malas, beralih overhead adalah tinggi tetapi kondusif untuk prestasi awal, V-show sentiasa menjadikan dan bertukar rendah, dan sesuai untuk bersembunyi paparan frekuensi tinggi; 4. Anda boleh menggunakan V-IF atau komponen dinamik: adalah untuk komponen rendering bersyarat; 5. Gunakan
Pengendalian rendering bersyarat di Vue adalah mudah dan fleksibel, terima kasih kepada arahan terbina dalam yang membolehkan anda mengawal apabila unsur atau komponen muncul di DOM. Alat utama ialah v-if , v-else , v-else-if , dan v-show . Inilah cara menggunakannya dengan berkesan.
1. Menggunakan v-if , v-else-if , dan v-else
Arahan -arahan ini menjadikan unsur -unsur secara kondusif berdasarkan kebenaran ekspresi JavaScript.
<pemat>
<dana>
<p v-if = "score> 90"> Cemerlang! </p>
<p v-else-if = "score> 70"> kerja yang baik! </p>
<p v-else-if = "score> 50"> Anda lulus. </P>
<P v-ELSE> Cuba lagi. </P>
</div>
</template>
<script>
Eksport Lalai {
data () {
kembali {
Skor: 85
}
}
}
</script>-
v-ifadalah keadaan utama. -
v-else-ifmembolehkan pelbagai syarat. -
v-elsemesti datang pada akhirnya dan tidak mengambil ungkapan.
Nota: Arahan ini berfungsi dengan baik pada unsur -unsur saudara dan mesti digunakan dalam urutan tanpa jurang.
2. Rendering bersyarat dengan v-show
v-show bertukar-tukar penglihatan elemen menggunakan CSS ( display: none ).
<pemat>
<dana>
<p v-show = "isvisible"> Ini ditunjukkan secara kondusif. </P>
</div>
</template>
<script>
Eksport Lalai {
data () {
kembali {
Isvisible: Benar
}
}
}
</script>- Tidak seperti
v-if,v-showsentiasa menjadikan elemen di DOM-ia hanya menonjolkan penglihatan. - Lebih baik untuk unsur-unsur yang sering beralih, kerana tidak ada kos semula.
3. Perbezaan utama: v-if vs v-show
| Ciri | v-if | v-show |
|---|---|---|
| Rendering | Malas - hanya menjadi benar apabila benar | Selalu diberikan |
| Prestasi | Kos yang lebih tinggi pada Togol | Kos yang lebih rendah pada togol |
| Gunakan kes | Togol yang jarang berlaku, kandungan berat | Togol yang kerap, ringan |
| Sokongan peralihan | Berfungsi dengan baik dengan <transition> | Kurang sesuai untuk peralihan |
Pilih v-if anda ingin mengeluarkan sepenuhnya kandungan dari DOM, dan v-show apabila anda hanya mengubah penglihatan.
4. Rendering komponen bersyarat
Anda boleh membuat komponen secara kondusif seperti elemen:
<pemat>
<dana>
<Header v-if = "isloggedin" />
<Login v-else />
</div>
</template> Atau gunakan komponen dinamik dengan :is :
<komponen: is = "currentView" />
Di mana currentView boleh menjadi nama atau rujukan komponen.
5. Elemen Pengumpulan dengan <template>
Gunakan <template> dengan v-if untuk menjadikan pelbagai elemen tanpa syarat tanpa menambah pembalut tambahan:
<template v-if = "user">
<h2> selamat datang, {{user.name}} </h2>
<p> e -mel anda: {{user.email}} </p>
</template>Ini menjadikan DOM bersih dan mengelakkan elemen kontena yang tidak perlu.
6. Petua dan amalan terbaik
- Lebih suka
v-showuntuk UI yang sering bertukar-tukar (seperti alat atau panel). - Gunakan
v-ifuntuk keadaan yang jarang berubah atau melibatkan komponen mahal. - Elakkan menggunakan
v-ifdanv-forelemen yang sama-ia boleh menyebabkan masalah prestasi dan kekeliruan. Jika diperlukan, reflektor menggunakan sifat yang dikira. - Semasa bekerja dengan borang atau input, pertimbangkan untuk menggunakan
keyuntuk menetapkan semula keadaan komponen:
<input v-if = "show" key = "input-field" />
Ini memaksa Vue untuk mencipta input apabila show perubahan, membersihkan nilainya.
Pada asasnya, Vue memberi anda cara yang bersih dan deklaratif untuk mengawal apa yang muncul. Pilih alat yang betul berdasarkan sama ada anda memerlukan pemasangan bersyarat sebenar ( v-if ) atau hanya toggling visual ( v-show ).
Atas ialah kandungan terperinci Cara Mengendalikan Rendering Bersyarat di Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Penjelasan grafik terperinci tentang cara mengintegrasikan editor kod Ace dalam projek Vue
Apr 24, 2023 am 10:52 AM
Ace ialah editor kod boleh terbenam yang ditulis dalam JavaScript. Ia sepadan dengan fungsi dan prestasi penyunting asli seperti Sublime, Vim dan TextMate. Ia boleh dibenamkan dengan mudah ke dalam mana-mana halaman web dan aplikasi JavaScript. Ace dikekalkan sebagai editor utama untuk Cloud9 IDE dan merupakan pengganti kepada projek Mozilla Skywriter (Bespin).
Mari kita bincangkan tentang cara menggunakan API Amap dalam vue3
Mar 09, 2023 pm 07:22 PM
Apabila kami menggunakan Amap, pegawai mengesyorkan banyak kes dan tunjuk cara kepada kami, tetapi kes ini semua menggunakan kaedah asli untuk mengakses dan tidak memberikan tunjuk cara vue atau bertindak balas Ramai orang telah menulis tentang akses vue2 di Internet , kita akan melihat bagaimana vue3 menggunakan API Amap yang biasa digunakan saya harap ia akan membantu semua orang.
Terokai cara menulis ujian unit dalam Vue3
Apr 25, 2023 pm 07:41 PM
Vue.js telah menjadi rangka kerja yang sangat popular dalam pembangunan bahagian hadapan hari ini. Memandangkan Vue.js terus berkembang, ujian unit menjadi semakin penting. Hari ini kita akan meneroka cara menulis ujian unit dalam Vue.js 3 dan menyediakan beberapa amalan terbaik serta masalah dan penyelesaian biasa.
Analisis ringkas tentang cara vue melaksanakan muat naik menghiris fail
Mar 24, 2023 pm 07:40 PM
Dalam proses projek pembangunan sebenar, kadangkala perlu memuat naik fail yang agak besar, dan kemudian muat naik akan menjadi agak perlahan, jadi latar belakang mungkin memerlukan bahagian hadapan untuk memuat naik hirisan fail Sebagai contoh, 1 A aliran fail gigabait dipotong kepada beberapa aliran fail kecil, dan kemudian antara muka diminta untuk menghantar aliran fail kecil masing-masing.
Contoh terperinci vue3 merealisasikan kesan mesin taip chatgpt
Apr 18, 2023 pm 03:40 PM
Semasa saya bekerja di tapak cermin chatgpt, saya mendapati bahawa beberapa tapak cermin tidak mempunyai kesan kursor mesin taip, tetapi hanya output teks Adakah mereka tidak mahu melakukannya? Saya mahu melakukannya pula. Jadi saya mengkajinya dengan teliti dan menyedari kesan mesin taip ditambah kursor Sekarang saya akan berkongsi penyelesaian dan rendering saya
Perbandingan mudah sintaks JSX dan sintaks templat dalam Vue (analisis kelebihan dan kekurangan)
Mar 23, 2023 pm 07:53 PM
Dalam Vue.js, pembangun boleh menggunakan dua sintaks berbeza untuk mencipta antara muka pengguna: sintaks JSX dan sintaks templat. Kedua-dua sintaks mempunyai kelebihan dan kekurangannya sendiri Mari kita bincangkan perbezaan, kelebihan dan kekurangannya.
Ajar anda langkah demi langkah cara menggunakan Vue3 untuk melaksanakan fungsi menyeret elemen elegan
Mar 30, 2023 pm 08:57 PM
Bagaimana untuk melaksanakan fungsi seret elemen? Artikel berikut akan membawa anda langkah demi langkah untuk memahami cara menggunakan Vue3 untuk melaksanakan fungsi penyeretan elemen elegan, dan mempelajari mata pengetahuan yang berkaitan melalui contoh, saya harap ia akan membantu anda!
Vue.js vs React: Pertimbangan khusus projek
Apr 09, 2025 am 12:01 AM
Vue.js sesuai untuk projek kecil dan sederhana dan lelaran yang cepat, sementara React sesuai untuk aplikasi besar dan kompleks. 1) Vue.js mudah digunakan dan sesuai untuk situasi di mana pasukan tidak mencukupi atau skala projek kecil. 2) React mempunyai ekosistem yang lebih kaya dan sesuai untuk projek dengan prestasi tinggi dan keperluan fungsional yang kompleks.
