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

Sezai AlkanFrontend Developer

Vue.js #vue-js #v-if #v-else

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.