Vue.js'de bileşenlerin nasıl oluşturulduğunu değişkenlere nasıl değer ataması yapıldığını ve Vue.js'nin avantajını görmüştük. Şimdi de Vue.js'de koşulların nasıl kullanıldığı üzerinde duracağız.

Aşağıda koyu renk ile gösterilen kısımda v-if="goster" ifadesinin kullanıldığını görmekteyiz. Bu ifade, goster adlı değişkenin değeri true ise ilgili bileşenin

görünür durumda olacağını, false ise görünmez durumda olacağını göstermektedir.

Aşağıda koyu renk ile gösterilen kısımda ise goster değişkenine nasıl değer ataması yapıldığı gösterilmektedir. Aşağıdaki html içerik bir nodepad dosyasına yazılıp, dosyanın uzantısı .html yapıldığında

ilgili bileşenin görünür durumda olacağı görülecektir. goster değişkenine false değer ataması yapılırsa bileşenin görünmez olacağı görülecektir.

Şu ana kadar gördüklerimiz sadece if kullanımı ile ilgiliydi. if, else if ve else koşullarını da kullanmak isteyebiliriz. Bunun için kodu aşağıdaki gibi düzenlememiz gerekir.

Yukarıdaki kodu incelersek, her koşul için ayrı bir bileşen ayarlanmaktadır. Hangi koşul sağlanırsa o bileşen görünür duruma gelmektedir.