# Rendering Bersyarat
# v-if
Instruksi v-if
biasa digunakan untuk melakukan rendering sebuah bagian dengan syarat tertentu. Bagian tersebut akan di-render jika ekspresi instruksi mengembalikan nilai truthy.
<h1 v-if="awesome">Vue is awesome!</h1>
Memungkinkan juga untuk menambahkan "bagian else" menggunakan v-else
:
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
2
# Pengelompokan Bersyarat dengan v-if
pada <template>
Karena v-if
merupkan instruksi, ia harus ditempelkan pada sebuah elemen tunggal. Tetapi bagaimana jika kita ingin mengalihkan lebih dari satu elemen? Dalam kasus ini kita dapat menggunakan v-if
pada elemen <template>
, yang bertindak sebagai pembungkus tak terlihat. Hasil final yang di-render tidak akan menyertakan elemen
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
2
3
4
5
# v-else
Anda dapat menggunakan instruksi v-else
untuk menunjukkan "bagian else" untuk v-if
:
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
2
3
4
5
6
Sebuah elemen yang memiliki instruksi v-else
harus berada tepat setelah elemen v-if
atau v-else-if
- jika tidak maka ia tidak akan dikenali.
# v-else-if
Sesuai namanya, v-else-if
bertindak sebagai "bagian else if" untuk v-if
. Ia juga bisa dirangkai berkali-kali:
<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>
2
3
4
5
6
7
8
9
10
11
12
Sama seperti v-else
, sebuah elemen v-else-if
harus berada tepat setelah elemen v-if
atau v-else-if
.
# v-show
Pilihan lain untuk menampilkan elemen secara bersyarat adalah instruksi v-show
. Penggunaannya kurang lebih sama:
<h1 v-show="ok">Hello!</h1>
Perbedaannya adalah elemen yang menggunakan v-show
akan selalu di-render dan tetap berada pada DOM; v-show
hanya mengalihkan properti CSS display
dari elemen tersebut.
v-show
tidak mendukung elemen <template>
, tidak juga bekerja dengan v-else
.
# v-if
vs v-show
v-if
merupakan rendering bersyarat yang "nyata" karena ia memastikan event listener dan komponen child di dalam bagian bersyarat benar-benar dihancurkan dan dibuat ulang selama peralihan.
v-if
juga malas: jika kondisi bernilai salah pada rendering awal, ia tidak akan melakukan apapun - bagian bersyarat tidak akan di-render hingga kondisi bernilai benar untuk pertama kali.
Sebagai perbandingan, v-show
jauh lebih sederhana - elemen selalu di-render terlepas dari kondisi awal atau tidak, menggunakan peralihan berbasis CSS.
Secara umum, v-if
memiliki biaya peralihan yang tinggi sedangkan v-show
memiliki biaya rendering awal yang lebih tinggi. Sehingga lebih baik gunakan v-show
jika Anda butuh peralihan yang cukup sering, dan gunakan v-if
jika kondisinya tidak mungkin berubah saat runtime.
# v-if
dengan v-for
Catatan
Menggunakan v-if
dan v-for
secara bersama-sama tidak direkomendasikan. Lihat panduan gaya untuk informasi lebih lanjut.
Ketika v-if
dan v-for
digunakan secara bersama-sama pada elemen, v-if
akan dievaluasi terlebih dahulu. Lihat panduan rendering daftar untuk detailnya.