Vue.Js v-if ve v-else kullanımı

Vue js ile

v-if

kullanımında koşula göre html elemanını aktif edebilir veya gizleyebiliriz.

v-if

içerisinde koşul

true 

değerini döndürdüğü takdirde

v-if

tanımlı olan html etiketi aktif olacaktır. Eğer koşul

false 

değerini döndürür ise

v-else

tanımlı olan html elemanı aktif olacaktır.

Kullanımı :

v-if=""

&&

v-else=""

 <div id="app">
    <p v-if="simple">Kocaeli</p>
    <p v-else>İstanbul</p>
	<button @click="simple = !simple" >Değiştir</button>
</div>

new Vue({
	el: "#app",
    data : {
    	simple : false
    }
})

Yukarıdaki örnekte

v-if

ve

v-else

tanımlı olan html elemanı vue içerisinde tanımladığımız

simple 

değişkenine göre sağlanan koşula göre işlem sağlamaktadır.

simple 

değişkeninin değerini button içerisinde

@click

özelliği ile değerinin tersi değer (Değeri

true 

ise

false

,

false 

ise

true

) yapacaktır.

 

v-if

tanımlı html elemanı

simple 

değişkeni

true 

koşulu sağladığı sürece aktif olacaktır.

simple 

değişkeni

false 

koşulunu sağlaması durumunda

v-else

tanımlı olan html elemanı aktif olacaktır.