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

sezaialkan
Sezai Alkan Frontend Developer

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.

Yorumlar

Yorum Yapabilmek İçin Giriş Yapmalısınız.
İlk Yorum Yapan Sen Ol!
Uçur Beni Kahramanım Yukarı Çık
Bu web sitesi çerezleri kullanıyor. Devam ederek çerez kullanımını kabul etmiş oluyorsunuz. Detay

Devam Etmek İçin Giriş Yapın

Kod Hocası İle Paylaşımda bulunabilir, Kendini geliştirebilirsin. Sende Hemen Giriş Yap Aramıza Katıl.

GirişKayıt Ol