Vue.js, temel web geliştirme bilgisi ile içinde web uygulamaları oluşturmaya başlayabileceğimiz, öğrenmesi kolay ve ulaşılabilir bir kitaplıktır. Vue'da.js, geliştiriciler, uygulama geliştirirken kodlamayı ve özgürlüğü hissetmeyi sever.

Herhangi bir dinamik web uygulamasında koşullu oluşturma gerekli bir bölümdür. Vue.js, koşullu oluşturma için farklı yollar sağlar ve amacımıza uygun olarak aşağıdaki yollardan herhangi birini kullanabiliriz:

• v-gösteri
• v-if
• v-başka

Bu yazıda Vue tarafından sağlanan bu yönergeleri deneyeceğiz.js'yi koşullu oluşturma için kullanın ve bunları daha iyi anlayın.

v-gösteri

v-show, yalnızca görünürlüğünü devre dışı bırakarak öğeyi gizler. Geçirilen ifadenin veya değişkenin değeri doğru değilse öğeyi gizler.

Örneğin:

Bu paragraf gizli değil

Bu paragraf gizli

v-if

Öte yandan v-if, öğeyi gizlemez, ancak iletilen ifadenin veya değişkenin değeri doğru olana kadar hiçbir şey oluşturmaz.

Örneğin:

v-show yönergesine kıyasla v-if yönergesinde ek bir özellik vardır. Bu blok arasında herhangi bir şey oluşturmak istemiyorsak, onu şablon bloğuna da uygulayabiliriz. Ya bunda bir alt bileşen var ya da birçok başka öğe var.

Örneğin:

v-başka

İki bloktan herhangi biri arasında koşullu işleme yapmak için v-if deyimi ile birlikte v-else yönergesini de kullanabiliriz. Ancak, v-else bloğunun v-if bloğundan hemen sonra görünmesi gerektiğini akılda tutarak.

Örneğin:

'isVar' doğru olursa bu paragraf işlenecektir

Aksi takdirde, bu paragraf oluşturulacak.

Şablon bloğuna v-else de uygulayabiliriz.

v-else-if

Tıpkı v-else gibi, v-if yönergesi ile birlikte v-else-if yönergesini de kullanabiliriz.

Örneğin:

v-if vs. v-gösteri

v-if ve v-show türü aynı görevi yapar. Her ikisi de, iletilen ifadenin doğru veya yanlış değerine dayalı olarak DOM'daki öğeleri gizler, ancak öğeleri gizleme ve oluşturmama arasındaki ince bir farkla.

Bu ikisi arasındaki süreyi ve işlem maliyetini karşılaştırırsak. v-if, çalışma zamanı veya geçiş sırasında daha pahalıyken, v-show, oluşturma başlangıcında daha maliyetlidir. Bu nedenle, geçiş amaç olduğunda v-show kullanmak akıllıca olacaktır. Aksi takdirde, v-if tercih edilir.

toparlamak

Bu yazıda, DOM'yi Vue'da koşullu olarak nasıl oluşturacağımızı öğrendik.js v-if ve v-else yönergelerini kullanarak. Bazı örnekler gösterdik ve v-show ve v-if yönergesi arasındaki gerçek farkı öğrendik. Bu makale daha iyi bir anlayışa ve kavramlara sahip olmanıza yardımcı oluyorsa, linuxhint'i ziyaret etmeye devam edin.com gibi faydalı içerikler için.