Directive v-if, v-show dan v-else ketiganya digunakan untuk pemilihan kondisi. Directive v-if akan me-render elemen HTML ketika kondisi utama terpenuhi (true), sedangkan directive v-else adalah kondisi alternatif untuk me-render elemen setelah kondisi utama / sebelumnya tidak terpenuhi (false). Ada pula v-show, yang tetap me-render elemen di seluruh kondisi tanpa terkecuali. Khusus elemen yang kondisi-nya tidak terpenuhi (false), v-show akan menggunakan CSS style="display:none;" untuk menyembunyikannya.

Sebelum masuk ke contoh penggunaan v-if, v-show dan v-else, saya akan melakukan sedikit modifikasi pada baris kode <li v-for="orangSantuy in listOrangSantuy"> yang ada di file latihan003.html menjadi <li v-for="(orangSantuy, i) in listOrangSantuy">.

dari yang sebelumnya :

        <!-- Mengakses property di dalam property -->
        <p><strong>Mengakses property di dalam property</strong></p>
        <ul>
            <li v-for="orangSantuy in listOrangSantuy">
                {{ orangSantuy.nama }}
                <ul>
                    <li v-for="mobil in orangSantuy.koleksiMobil">
                        {{ mobil }}
                    </li>
                </ul>
            </li>
        </ul>
        
    </div>
    <script src="vue.js"></script>

saya rubah menjadi :

        <!-- Mengakses property di dalam property disertai index -->
        <p><strong>Mengakses property di dalam property disertai index</strong></p>
        <ul>
            <li v-for="(orangSantuy, i) in listOrangSantuy">
                property ke-{{ i }} : {{ orangSantuy.nama }}
                <ul>
                    <li v-for="(mobil, j) in orangSantuy.koleksiMobil">
                        {{ j }} : {{ mobil }}
                    </li>
                </ul>
            </li>
        </ul>
        
    </div>
    <script src="vue.js"></script>

Dengan mengganti format v-for="alias in collection" ke format v-for="(alias, index) in collection", saya bisa mengetahui index atau urutan di perulangan pertama melalui {{ i }}. Sedangkan untuk perulangan kedua, output dari index {{ j }} tidak lagi berupa urutan, melainkan nama property mobil1, mobil2 dan mobil3. Hal ini dikarenakan koleksiMobil tidak memiliki satu pun property berbentuk objek di dalamnya.

menggunakan directive v-if v-show v-else pada vue.js

Contoh Directive v-if

Pada contoh ini, saya akan menerapkan 2 (dua) kondisi pengecekan terhadap property yang akan ditampilkan. Pertama, saya hanya ingin menampilkan orangSantuy yang di namanya terdapat huruf ‘N’ atau ‘n’ dengan kode v-if="orangSantuy.nama.includes('N') || orangSantuy.nama.includes('n')". Kedua, saya tidak ingin property mobil1 dan mobil3 ikut ditampilkan dengan kode v-if="(j != 'mobil1') && (j != 'mobil3')".

Copy paste baris kode berikut ke file latihan003.html :

<!-- Menggunakan v-if di dalam v-for -->
<p><strong>Menggunakan v-if di dalam v-for</strong></p>
<ul>
    <li v-for="(orangSantuy, i) in listOrangSantuy" v-if="orangSantuy.nama.includes('N') || orangSantuy.nama.includes('n')">
        property ke-{{ i }} : {{ orangSantuy.nama }}
        <ul>
            <li v-for="(mobil, j) in orangSantuy.koleksiMobil" v-if=" (j != 'mobil1') && (j != 'mobil3') ">
                {{ j }} : {{ mobil }}
            </li>
        </ul>
    </li>
</ul>

ke baris yang ditandai dengan <!-- SISIPKAN DI SINI -->

        <!-- Mengakses property di dalam property disertai index -->
        <p><strong>Mengakses property di dalam property disertai index</strong></p>
        <ul>
            <li v-for="(orangSantuy, i) in listOrangSantuy">
                property ke-{{ i }} : {{ orangSantuy.nama }}
                <ul>
                    <li v-for="(mobil, j) in orangSantuy.koleksiMobil">
                        {{ j }} : {{ mobil }}
                    </li>
                </ul>
            </li>
        </ul>

        <!-- SISIPKAN DI SINI -->
        
    </div>
    <script src="vue.js"></script>

Hasilnya, elemen HTML untuk property ke-0 dengan nama Agus tidak akan di-render, begitu pula dengan mobil1 dan mobil3 seperti yang tertampil pada Inspect Elements :

menggunakan directive v-if v-show v-else pada vue.js

Contoh Directive v-else

Kondisi yang saya terapkan untuk menampilkan property dengan directive ini adalah :

  1. <span v-if="(orangSantuy.nama.length >=5)">
    Jika panjang nama sama atau lebih besar dari 5 karakter, maka property nama akan di-render dengan cetak tebal dan hanya alias mobil2 dari collection koleksiMobil yang di-render.
  2. <span v-else-if="(orangSantuy.nama.length <=4) &&
    ( orangSantuy.nama.includes('G') || orangSantuy.nama.includes('g') )">
    Jika panjang nama sama atau kurang dari 4 karakter, terdapat huruf ‘G’ atau ‘g’ di dalamnya, maka property nama akan di-render tanpa cetak tebal dan hanya alias mobil1 dari collection koleksiMobil yang di-render.
  3. <span v-else>
    Jika dua kondisi di atas tidak ada yang terpenuhi, maka property nama akan di-render tanpa cetak tebal dan alias mobil3 dari collection koleksiMobil yang di-render.

Copy paste baris kode berikut ke file latihan003.html :

<!-- Menggunakan v-if dan v-else di dalam v-for -->
<p><strong>Menggunakan v-if dan v-else di dalam v-for</strong></p>
<ul>
    <li v-for="(orangSantuy, i) in listOrangSantuy">
        <span v-if="(orangSantuy.nama.length >=5)">
            nama: <strong>{{ orangSantuy.nama }}</strong>
            <ul>
                <li>
                    mobil2: {{ orangSantuy.koleksiMobil.mobil2 }}
                </li>
            </ul>
        </span>
        <span v-else-if="(orangSantuy.nama.length <=4) && ( orangSantuy.nama.includes('G') || orangSantuy.nama.includes('g') )">
            nama: {{ orangSantuy.nama }}
            <ul>
                <li>
                    mobil1: {{ orangSantuy.koleksiMobil.mobil1 }}
                </li>
            </ul>
        </span>
        <span v-else>
            nama: {{ orangSantuy.nama }}
            <ul>
                <li>
                    mobil3: {{ orangSantuy.koleksiMobil.mobil3 }}
                </li>
            </ul>
        </span>
    </li>
</ul>

ke baris yang ditandai dengan <!-- SISIPKAN DI SINI -->

        <!-- Menggunakan v-if di dalam v-for -->
        <p><strong>Menggunakan v-if di dalam v-for</strong></p>
        <ul>
            <li v-for="(orangSantuy, i) in listOrangSantuy" v-if="orangSantuy.nama.includes('n')">
                property ke-{{ i }} : {{ orangSantuy.nama }}
                <ul>
                    <li v-for="(mobil, j) in orangSantuy.koleksiMobil" v-if=" (j != 'mobil1') && (j != 'mobil3') ">
                    {{ j }} : {{ mobil }}
                    </li>
                </ul>
            </li>
        </ul>

        <!-- SISIPKAN DI SINI -->
        
    </div>
    <script src="vue.js"></script>

Hasil render dari penggunaan v-if dan v-else di dalam v-for pada contoh di atas :

  • Agus : memenuhi kondisi alternatif v-else-if="(orangSantuy.nama.length <=4) && ( orangSantuy.nama.includes('G') || orangSantuy.nama.includes('g') )"
  • Bambang : memenuhi kondisi utama v-if="(orangSantuy.nama.length >=5)"
  • Rian : tidak memenuhi kondisi apapun v-else
menggunakan directive v-if v-show v-else pada vue.js

Contoh Directive v-show

Copy paste baris kode berikut ke file latihan003.html :

<!-- Menggunakan v-show di dalam v-for -->
<p><strong>Menggunakan v-show di dalam v-for</strong></p>
<ul>
    <li v-for="(orangSantuy, i) in listOrangSantuy" v-show="(orangSantuy.nama.length >=5)">
        nama: <strong>{{ orangSantuy.nama }}</strong>
    </li>
</ul>

ke baris yang ditandai dengan <!-- SISIPKAN DI SINI -->

        <!-- Menggunakan v-if dan v-else di dalam v-for -->
        <p><strong>Menggunakan v-if dan v-else di dalam v-for</strong></p>
        <ul>
            <li v-for="(orangSantuy, i) in listOrangSantuy">
                <span v-if="(orangSantuy.nama.length >=5)">
                    nama: <strong>{{ orangSantuy.nama }}</strong>
                    <ul>
                        <li>
                            mobil2: {{ orangSantuy.koleksiMobil.mobil2 }}
                        </li>
                    </ul>
                </span>
                <span v-else-if="(orangSantuy.nama.length <=4) && ( orangSantuy.nama.includes('G') || orangSantuy.nama.includes('g') )">
                    nama: {{ orangSantuy.nama }}
                    <ul>
                        <li>
                            mobil1: {{ orangSantuy.koleksiMobil.mobil1 }}
                        </li>
                    </ul>
                </span>
                <span v-else>
                    nama: {{ orangSantuy.nama }}
                    <ul>
                        <li>
                            mobil3: {{ orangSantuy.koleksiMobil.mobil3 }}
                        </li>
                    </ul>
                </span>
            </li>
        </ul>

        <!-- SISIPKAN DI SINI -->
        
    </div>
    <script src="vue.js"></script>

Hasil eksekusi file latihan003.html seolah hanya me-render elemen untuk property Bambang yang memenuhi kondisi v-for="(orangSantuy, i) in listOrangSantuy" v-show="(orangSantuy.nama.length >=5)". Akan tetapi, jika ditelusuri melalui Inspect Elements, sebenarnya elemen untuk Agus dan Rian juga ikut di-render. Directive v-show memperlakukan property Agus dan Rian sebagai kondisi false, kemudian menyembunyikannya dengan CSS style="display:none;".

menggunakan directive v-if v-show v-else pada vue.js