v-if, v-show, v-else ve v-else-if ile Vue'da Koşullu Oluşturma/Görüntüleme

Giriş

Vue.js, dinamik web arayüzleri oluşturmak için basit bir web uygulaması çerçevesidir ve Tek Sayfalı Uygulamalar (SPA). Bu uygulamaları oluştururken, çoğu zaman, belirli bir kritere göre bir şey yapmak – koşullu oluşturmanın özü budur.

Koşullu oluşturma, bir koşulun doğru olup olmadığına bağlı olarak farklı kullanıcı arabirimi (UI) işaretlemesi oluşturma yeteneğini ifade eder. Bu kavram, bileşenleri gösterme veya gizleme (geçiş yapma), uygulama işlevselliğini değiştirme, kimlik doğrulama ve yetkilendirmeyi işleme ve daha pek çok bağlamda sıklıkla kullanılır.

Bu makalede, Vue.js'de koşullu görüntü oluşturmanın çeşitli yollarına bakacağız. v-if, v-else-if, ve v-else direktifler. Ayrıca bazı örneklere göz atacağız ve aralarındaki farkı vurgulayacağız. v-if ve v-show.

v-eğer

The v-if yönerge kullanılır koşullu olarak bir blok oluştur ile blok anlamına gelir v-if öznitelik sadece olacak üretilmiş direktifin ifadesi bir döndürürse true değer. İfade geçersiz bir sonuç veriyorsa (örneğin, null, 0, boş dize, false), eleman silindi DOM'dan.

Bu davranışı pratik örnek üzerinde açıklayalım:

<div v-if="login"> <p>This user has been logged in!... Welcome.</p>
</div> <script>
export default { data() { return { login: true, }; }
};
</script>

Dan beri login ayarlandı true, <div> içeren blok v-if direktif üretilecek, bu şekilde görüntülenecektir.

v-eğer vs v-gösteri

Dikkat çekmek gerekir ki v-show yukarıdaki örnekte de çalışır ve görünüşte aynı şekilde işlev görür, ancak ikisi arasında bir fark vardır.

v-if koşullu olarak oluşturur bir element, oysa v-show koşullu olarak gösterir/görüntüler bir element.

Bu, koşullu değiştirildiğinde, v-if bileşenleri gerçekten silecek ve geri yükleyecektir. v-show onları görünmez veya görünür kılar. Aşağıdaki animasyon nasıl yapıldığını gösterir. v-if aslında kod bloklarını siler ve yeniden üretir:

Bu arada, v-show öğeyi her zaman DOM'da tutacak ve görünümünü değiştirmek için yalnızca CSS'sini değiştirecektir ( display için none):

v-başka

The v-else direktif bir v-if özelleştirmenizi sağlayan yönerge false koşullu işlemelerdeki değer. eğer değilse true, Kullanabilirsiniz v-else bunun yerine ne olması gerektiğini tanımlamak için.

Örneğin, bir şifre girdimiz olduğunu ve bunun bir hata mesajı vermesini istediğimizi varsayalım, "Zayıf şifre", girişin uzunluğu 6'dan azsa veya ekran "Güçlü şifre" uzunluk 6'dan büyükse.

Bu, yanlış durumu işleme seçeneği olan koşullu bir oluşturmadır:

<form> <input type="password" v-model="password" placeholder="Enter your password" /> <p v-if="password.length > 6">Strong Password</p> <p v-else>Weak Password</p>
</form> <script>
export default { data() { return { password: "" }; }
};
</script>

Basit bir oturum açma sayfasının içeriğini değiştirmek için bunu kullanalım, böylece kullanıcının oturum açıp açmamasına bağlı olarak mesajı değiştirir. Düğme ifadesini aşağıdakilere göre değiştireceğiz: userLoggedIn durumu da:

<div id="app"> <div v-if="userLoggedIn"> <h2>Hello Welcome!</h2> <p>You have sucessfully logged in to your user account!</p> </div> <div v-else> <p>Please Log In to access your account!</p> </div> <button @click="userLoggedIn = !userLoggedIn"> <p v-if="!userLoggedIn">Login</p> <p v-else>LogOut</p> </button>
</div> <script>
export default { data() { return { userLoggedIn: false }; }
};
</script>

Düğmenin tıklama olayı, userLoggedIn veri öğesi ve bu, aşağıda görüldüğü gibi görüntülenen verileri etkileyecektir:

v-else-eğer

v-else-if extends a v-if bir ile else...if engellemek. Bu, JavaScript'inkine benzer else...if mevcut bir if ifadesine bir if ifadesi eklememize izin verir. v-if. Bu, kontrol edilecek çok sayıda kriter olduğunda ve birkaç kez zincirlenebildiğinde kullanılır:

<form> <input type="password" v-model="password" placeholder="Enter your password" /> <p v-if="password.length < 4">Weak Password</p> <p v-else-if="password.length < 7">Fairly Strong Password</p> <p v-else>Strong Password</p>
</form> <script>
export default { data() { return { password: "" }; }
};
</script>

Sonuç

Bu makalede, bir öğenin koşullu olarak nasıl oluşturulacağını gördük. v-if, v-else, ve v-else-if. arasındaki farkı da açıkladık. v-if ve v-show.

• Akıllı para. Avrupa'nın En İyi Bitcoin ve Kripto Borsası.
• Plato blok zinciri. Web3 Metaverse Zekası. Bilgi Güçlendirildi. SERBEST ERİŞİM.
• KriptoHawk. Altcoin Radarı. Ücretsiz deneme.
• Kaynak: https://stackabuse.com/conditional-rendering-in-vue-with-v-if-v-show-v-else-and-v-else-if/