本文主要和大家分享Vue.js條件渲染詳解，在字符串模板中，比如 Handlebars，我們得像這樣寫(xiě)一個(gè)條件塊：
<!-- Handlebars 模板 -->{{#if ok}}
<h1>Yes</h1>{{/if}}在 Vue 中，我們使用 v-if 指令實(shí)現(xiàn)同樣的功能：
<h1 v-if="ok">Yes</h1>
也可以用 v-else 添加一個(gè)“else 塊”：
<h1 v-if="ok">Yes</h1>No
# 在 <template> 元素上使用 v-if 條件渲染分組
因?yàn)?v-if 是一個(gè)指令，所以必須將它添加到一個(gè)元素上。但是如果想切換多個(gè)元素呢？此時(shí)可以把一個(gè) <template> 元素當(dāng)做不可見(jiàn)的包裹元素，并在上面使用 v-if。最終的渲染結(jié)果將不包含 <template> 元素。
<p id="example">
<template v-if='ok'>
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template></p>var vm = new Vue({
el: '#example', data: {
ok: true
}
})# v-else 和 v-else-if
可以使用 v-else 指令來(lái)表示 v-if 的“else 塊”：
<p v-if="Math.random() > 0.5">
Now you see me</p>
<p v-else>
Now you don't
</p><p v-if="type === 'A'">
A
</p>
<p v-else-if="type === 'B'">
B
</p>
<p v-else-if="type === 'C'">
C
</p>
<p v-else>
Not A/B/C
</p>v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的后面，否則它將不會(huì)被識(shí)別。
類似于 v-else，v-else-if 也必須緊跟在帶 v-if 或者 v-else-if 的元素之后。
v-show
另一個(gè)用于根據(jù)條件展示元素的選項(xiàng)是 v-show 指令。
<h1 v-show="ok">Hello!</h1>
不同的是帶有 v-show 的元素始終會(huì)被渲染并保留在 DOM 中。v-show 只是簡(jiǎn)單地切換元素的 CSS 屬性 display。
注意，v-show 不支持 <template> 元素，也不支持 v-else。
v-if vs v-show
v-if 是“真正”的條件渲染，因?yàn)樗鼤?huì)確保在切換過(guò)程中條件塊內(nèi)的事件監(jiān)聽(tīng)器和子組件適當(dāng)?shù)乇讳N毀和重建。
v-if 也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r(shí)，才會(huì)開(kāi)始渲染條件塊。
相比之下，v-show 就簡(jiǎn)單得多——不管初始條件是什么，元素總是會(huì)被渲染，并且只是簡(jiǎn)單地基于 CSS 進(jìn)行切換。
一般來(lái)說(shuō)，v-if 有更高的切換開(kāi)銷，而 v-show 有更高的初始渲染開(kāi)銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運(yùn)行時(shí)條件很少改變，則使用 v-if 較好。
v-if
在字符串模板中，比如 Handlebars，我們得像這樣寫(xiě)一個(gè)條件塊：
<!-- Handlebars 模板 -->{{#if ok}}
<h1>Yes</h1>{{/if}}在 Vue 中，我們使用 v-if 指令實(shí)現(xiàn)同樣的功能：
<h1 v-if="ok">Yes</h1>
也可以用 v-else 添加一個(gè)“else 塊”：
<h1 v-if="ok">Yes</h1>No
# 在 <template> 元素上使用 v-if 條件渲染分組
因?yàn)?v-if 是一個(gè)指令，所以必須將它添加到一個(gè)元素上。但是如果想切換多個(gè)元素呢？此時(shí)可以把一個(gè) <template> 元素當(dāng)做不可見(jiàn)的包裹元素，并在上面使用 v-if。最終的渲染結(jié)果將不包含 <template> 元素。
<p id="example">
<template v-if='ok'>
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template></p>var vm = new Vue({
el: '#example', data: {
ok: true
}
})# v-else 和 v-else-if
可以使用 v-else 指令來(lái)表示 v-if 的“else 塊”：
<p v-if="Math.random() > 0.5">
Now you see me</p>
<p v-else>
Now you don't
</p><p v-if="type === 'A'">
A
</p>
<p v-else-if="type === 'B'">
B
</p>
<p v-else-if="type === 'C'">
C
</p>
<p v-else>
Not A/B/C
</p>v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的后面，否則它將不會(huì)被識(shí)別。
類似于 v-else，v-else-if 也必須緊跟在帶 v-if 或者 v-else-if 的元素之后。
v-show
另一個(gè)用于根據(jù)條件展示元素的選項(xiàng)是 v-show 指令。
<h1 v-show="ok">Hello!</h1>
不同的是帶有 v-show 的元素始終會(huì)被渲染并保留在 DOM 中。v-show 只是簡(jiǎn)單地切換元素的 CSS 屬性 display。
注意，v-show 不支持 <template> 元素，也不支持 v-else。
v-if vs v-show
v-if 是“真正”的條件渲染，因?yàn)樗鼤?huì)確保在切換過(guò)程中條件塊內(nèi)的事件監(jiān)聽(tīng)器和子組件適當(dāng)?shù)乇讳N毀和重建。
v-if 也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r(shí)，才會(huì)開(kāi)始渲染條件塊。
相比之下，v-show 就簡(jiǎn)單得多——不管初始條件是什么，元素總是會(huì)被渲染，并且只是簡(jiǎn)單地基于 CSS 進(jìn)行切換。
一般來(lái)說(shuō)，v-if 有更高的切換開(kāi)銷，而 v-show 有更高的初始渲染開(kāi)銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運(yùn)行時(shí)條件很少改變，則使用 v-if 較好。
相關(guān)推薦：
Atas ialah kandungan terperinci Vue.js條件渲染詳解. 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 terperinci tentang mendapatkan hak pentadbir dalam Win11
Mar 08, 2024 pm 03:06 PM
Sistem pengendalian Windows ialah salah satu sistem pengendalian yang paling popular di dunia, dan versi baharunya Win11 telah menarik perhatian ramai. Dalam sistem Win11, mendapatkan hak pentadbir adalah operasi penting Hak pentadbir membolehkan pengguna melakukan lebih banyak operasi dan tetapan pada sistem. Artikel ini akan memperkenalkan secara terperinci cara mendapatkan kebenaran pentadbir dalam sistem Win11 dan cara mengurus kebenaran dengan berkesan. Dalam sistem Win11, hak pentadbir dibahagikan kepada dua jenis: pentadbir tempatan dan pentadbir domain. Pentadbir tempatan mempunyai hak pentadbiran penuh ke atas komputer tempatan
Penjelasan terperinci tentang operasi bahagian dalam Oracle SQL
Mar 10, 2024 am 09:51 AM
Penjelasan terperinci tentang operasi bahagi dalam OracleSQL Dalam OracleSQL, operasi bahagi ialah operasi matematik yang biasa dan penting, digunakan untuk mengira hasil pembahagian dua nombor. Bahagian sering digunakan dalam pertanyaan pangkalan data, jadi memahami operasi bahagian dan penggunaannya dalam OracleSQL adalah salah satu kemahiran penting untuk pembangun pangkalan data. Artikel ini akan membincangkan pengetahuan berkaitan operasi bahagian dalam OracleSQL secara terperinci dan menyediakan contoh kod khusus untuk rujukan pembaca. 1. Operasi bahagian dalam OracleSQL
Penjelasan terperinci tentang peranan dan penggunaan pengendali modulo PHP
Mar 19, 2024 pm 04:33 PM
Operator modulo (%) dalam PHP digunakan untuk mendapatkan baki pembahagian dua nombor. Dalam artikel ini, kami akan membincangkan peranan dan penggunaan pengendali modulo secara terperinci, dan memberikan contoh kod khusus untuk membantu pembaca memahami dengan lebih baik. 1. Peranan pengendali modulo Dalam matematik, apabila kita membahagi integer dengan integer lain, kita mendapat hasil bagi dan baki. Sebagai contoh, apabila kita membahagi 10 dengan 3, hasil bahagi ialah 3 dan selebihnya ialah 1. Operator modulo digunakan untuk mendapatkan baki ini. 2. Penggunaan operator modulo Dalam PHP, gunakan simbol % untuk mewakili modulus
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.
Penjelasan terperinci tentang fungsi sistem panggilan sistem linux().
Feb 22, 2024 pm 08:21 PM
Penjelasan terperinci tentang fungsi sistem panggilan sistem Linux() Panggilan sistem ialah bahagian yang sangat penting dalam sistem pengendalian Linux Ia menyediakan cara untuk berinteraksi dengan kernel sistem. Antaranya, fungsi system() adalah salah satu fungsi panggilan sistem yang biasa digunakan. Artikel ini akan memperkenalkan penggunaan fungsi system() secara terperinci dan memberikan contoh kod yang sepadan. Konsep Asas Panggilan Sistem Panggilan sistem ialah satu cara untuk atur cara pengguna berinteraksi dengan kernel sistem pengendalian. Program pengguna meminta sistem pengendalian dengan memanggil fungsi panggilan sistem
Penjelasan terperinci tentang perintah curl Linux
Feb 21, 2024 pm 10:33 PM
Penjelasan terperinci tentang perintah curl Linux Ringkasan: curl ialah alat baris arahan yang berkuasa yang digunakan untuk komunikasi data dengan pelayan. Artikel ini akan memperkenalkan penggunaan asas perintah curl dan memberikan contoh kod sebenar untuk membantu pembaca memahami dan menggunakan arahan dengan lebih baik. 1. Apakah curl? curl ialah alat baris arahan yang digunakan untuk menghantar dan menerima pelbagai permintaan rangkaian. Ia menyokong berbilang protokol, seperti HTTP, FTP, TELNET, dll., dan menyediakan fungsi yang kaya, seperti muat naik fail, muat turun fail, penghantaran data, proksi
Adakah vue.js sukar belajar?
Apr 04, 2025 am 12:02 AM
Vue.js tidak sukar untuk dipelajari, terutamanya bagi pemaju dengan asas JavaScript. 1) Reka bentuk progresif dan sistem responsif memudahkan proses pembangunan. 2) Pembangunan berasaskan komponen menjadikan pengurusan kod lebih cekap. 3) Contoh penggunaan menunjukkan penggunaan asas dan lanjutan. 4) Kesilapan biasa boleh disahpepijat melalui Vuedevtools. 5) Pengoptimuman prestasi dan amalan terbaik, seperti menggunakan V-IF/V-Show dan atribut utama, boleh meningkatkan kecekapan aplikasi.
Adakah Vue digunakan untuk frontend atau backend?
Apr 03, 2025 am 12:07 AM
Vue.js terutamanya digunakan untuk pembangunan front-end. 1) Ia adalah rangka kerja JavaScript yang ringan dan fleksibel yang difokuskan pada membina antara muka pengguna dan aplikasi satu halaman. 2) Inti Vue.js adalah sistem data responsifnya, dan pandangannya dikemas kini secara automatik apabila data berubah. 3) Ia menyokong pembangunan komponen, dan UI boleh dibahagikan kepada komponen bebas dan boleh diguna semula.
