Penyampaian bersyarat

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no ??</h1>

< strong>Gunakan v-if kumpulan pemaparan bersyarat pada elemen <template>v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

也可以用 v-else 添加一个“else 块”：

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

在 <template> 元素上使用 v-if 条件渲染分组

因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-else

你可以使用 v-else 指令来表示 v-if 的“else 块”：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

v-else-if

2.1.0 新增

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

用 key

<h1 v-show="ok">Hello!</h1>

v-else🎜🎜🎜🎜Anda boleh menggunakan v- arahan lain untuk mewakili "blok lain" v-if: 🎜rrreee🎜 elemenv-else mesti diikuti dengan segera oleh v-if atau v-else - jika elemen, jika tidak, ia tidak akan dikenali. 🎜🎜🎜🎜

v-else-if🎜🎜

🎜2.1.0 Ditambahkan 🎜

🎜v-else-if, seperti namanya, bertindak sebagai "else-if block" v-if dan boleh digunakan secara berterusan : 🎜rrreee🎜Similar Untuk v-else, v-else-if juga mesti diikuti dengan segera oleh v-if atau v -else-if< /code> selepas elemen. 🎜🎜🎜🎜

Gunakan key untuk mengurus elemen boleh guna semula 🎜🎜🎜🎜Vue akan melakukan yang terbaik Boleh memaparkan elemen dengan cekap, selalunya dengan menggunakan semula elemen sedia ada dan bukannya memaparkannya dari awal. Selain membuat Vue dengan sangat pantas, ini mempunyai beberapa faedah lain. Contohnya, jika anda membenarkan pengguna bertukar antara kaedah log masuk yang berbeza: 🎜rrreee

Jadi menukar loginType dalam kod di atas tidak akan mengosongkan perkara yang telah dimasukkan oleh pengguna. Oleh kerana kedua-dua templat menggunakan elemen yang sama, <input> tidak diganti—hanya placeholdernya diganti. loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，<input> 不会被替换掉——仅仅是替换了它的 placeholder。

自己动手试一试，在输入框中输入一些文本，然后按下切换按钮：

这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性即可：

rrreee

现在，每次切换时，输入框都将被重新渲染。请看：

注意，<label> 元素仍然会被高效地复用，因为它们没有添加 key 属性。

v-show

---

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：

rrreee

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

注意，v-show 不支持 <template> 元素，也不支持 v-else。

v-if vs v-show

---

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if

Cuba sendiri, masukkan beberapa teks dalam kotak input dan tekan butang togol: 🎜🎜🎜🎜Ini tidak selalunya memenuhi keperluan sebenar, jadi Vue menyediakan anda cara untuk menyatakan "Kedua-dua elemen ini adalah bebas sepenuhnya, jangan gunakannya semula ." Cuma tambahkan atribut key dengan nilai unik: 🎜rrreee🎜Kini kotak input akan dipaparkan semula setiap kali ia bertukar. Sila lihat: 🎜🎜<label> masih akan digunakan semula dengan cekap kerana ia tidak mempunyai atribut key yang ditambahkan. 🎜🎜🎜🎜

v-show

---

🎜Pilihan lain untuk memaparkan elemen secara bersyarat ialah arahan v-show. Penggunaannya lebih kurang sama: 🎜🎜rrreee🎜Perbezaannya ialah elemen dengan v-show akan sentiasa dipaparkan dan kekal dalam DOM. v-show hanya menukar sifat CSS elemen display. 🎜

🎜Perhatikan bahawa v-show tidak menyokong elemen <template>, dan juga tidak menyokong v-else. 🎜

🎜🎜🎜

v-if lwn v-show

---

🎜v-jika ialah pemaparan bersyarat "benar", kerana ia memastikan pendengar acara dan subkomponen dalam blok bersyarat dimusnahkan dan dicipta semula dengan sewajarnya semasa suis. 🎜🎜🎜v-jika juga malas: jika syarat palsu pada pemaparan awal, tiada apa yang dilakukan - blok bersyarat tidak akan dipaparkan sehingga kali pertama syarat menjadi benar. 🎜🎜Sebagai perbandingan, v-show adalah lebih mudah - elemen akan sentiasa dipaparkan tidak kira apa syarat awalnya, dan ia hanya ditogol berdasarkan CSS. 🎜🎜Secara umumnya, v-if mempunyai overhed penukaran yang lebih tinggi, manakala v-show mempunyai overhed pemaparan awal yang lebih tinggi. Oleh itu, jika anda perlu menukar sangat kerap, adalah lebih baik untuk menggunakan v-show jika keadaan jarang berubah semasa runtime, lebih baik menggunakan v-if. 🎜🎜🎜🎜

v-if 与 v-for 一起使用

---

不推荐同时使用 v-if 和 v-for。请查阅 风格指南 以获取更多信息。

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if Keutamaan yang lebih tinggi. Sila lihat Panduan Pemberian Senarai untuk butiran.