Vue.js'de Koşullu İşleme Nasıl Uygulanır?

Vue.js, dinamik web uygulamaları oluşturmayı kolaylaştıran popüler bir JavaScript çerçevesidir. Vue.js, verileri ve olayları temel alarak içerik oluşturabilir. Bu, özellikle duyarlı ve etkileşimli kullanıcı arayüzleri oluşturmak için kullanışlıdır.

Vue yönergelerinin ne olduğunu ve Vue.js'de koşullu işlemeyi gerçekleştirmek için bunları nasıl kullanacağınızı öğrenin.

Vue Yönergeleri Nelerdir?

Vue yönergeleri, Vue.js şablonlarındaki HTML öğelerinin davranışını, bunlara benzersiz nitelikler ekleyerek geliştirmenize olanak tanır.

Yönergeler, Vue.js'nin temel bir parçasıdır ve Belge Nesne Modeli (DOM), öğelere dinamik davranış ekleyin ve verileri yönetin.

Ayrıca Vue.js, Vue uygulamaları için kolayca yeniden kullanılabilir işlevler oluşturmanıza olanak tanıyan özel yönergeler oluşturmanıza olanak tanır.

Vue çerçevesi yönergelerinin önüne şunu ekler: "v-" yönergenin adından önce. Vue'da yaygın olarak kullanılan direktif örnekleri şunları içerir:

v-açık, v-bağlama, v-için, Ve v-eğer.

Koşullu İşleme Nedir?

Koşullu oluşturma, belirttiğiniz koşullara göre öğeleri görüntülemenizi veya gizlemenizi sağlar. Örneğin, kullanıcılara yalnızca geçerli bir e-posta adresi girmeleri durumunda bir mesaj göstermek için koşullu oluşturmayı kullanabilirsiniz.

Vue.js'de aşağıdaki gibi yönergeleri kullanabilirsiniz: v-eğer Ve v-gösteri nasıl yapacağınızdan farklı olarak, uygulamanızda koşullu işleme elde etmek için içeriği React.js'de koşullu olarak işleyin.

v-if Direktifi ile Koşullu Oluşturmayı Gerçekleştirme

Benzer JavaScript eğer... başka ifade, v-eğer Vue.js'deki yönerge bir koşul tutar. Karşılanmazsa, Vue.js aşağıdaki koşulu değerlendirir. v-başka Yönergeyi kullanır ve bir koşulu karşılayana veya tüm koşulları değerlendirene kadar bunu yapmaya devam eder.

Bu yönerge, bir öğeyi bir boole değerine dayalı olarak koşullu olarak oluşturmanıza olanak tanır. Değeri yanlışsa, Vue.js derleyicisi parçayı işlemeyecektir.

İçeriği koşullu olarak işlemenin bir örneğini burada bulabilirsiniz: v-eğer:

html>
<htmldil="tr">
<KAFA>
<başlık>belgebaşlık>
<senaryokaynak=" https://unpkg.com/vue@3/dist/vue.global.js">senaryo>
KAFA>
<vücut>
<divİD="uygulama">
<h1v-eğer='YANLIŞ' >{{ mesaj1 }}h1>
<h1v-başka >{{ mesaj2 }}h1>
div>
<senaryo>
 const uygulaması = Vue.createApp({
 veri () {
 geri dönmek {
 message1: 'Bu senin Vue Uygulaman.',
 message2: 'Henüz bir Vue Uygulaması Değil.'
 }
 }
 })
 app.mount('#uygulama')
senaryo>
vücut>
html>

Yukarıdaki kod bloğu, eklenerek oluşturulan bir Vue uygulamasını göstermektedir. İçerik Dağıtım Ağı (CDN) HTML dosyanızın gövdesine bağlantı. v-if yönergesi, yalnızca koşulu doğruysa h1 öğesini oluşturur.

Vue uygulamalarında, bir bileşeni belirli dinamik ölçütlere göre oluşturmanız gereken durumlar vardır. Bu, yalnızca bir kullanıcı bir düğmeyi tıkladığında bilgilerin görüntülenmesi veya bir API'den veriler yüklenirken bir yükleme göstergesinin gösterilmesi gibi senaryolarda kullanışlıdır.

Örneğin:

html>
<htmldil="tr">
<KAFA>
<başlık>Vue uygulamasıbaşlık>
<senaryokaynak=" https://unpkg.com/vue@3/dist/vue.global.js">senaryo>
KAFA>
<vücut>
<divİD="uygulama">
<divv-eğer="kullanıcıları göster">
<Ul>
<li>Kullanıcı1li>
<li>Kullanıcı2li>
Ul>
div>
<düğmev-açık: tıklayın="ToggleShowUsers()">
 Kullanıcıları Değiştir
düğme>
<h1>{{ İleti }}h1>
div>
<senaryo>
 const uygulaması = Vue.createApp({
 veri () {
 geri dönmek {
 showUsers: doğru,
 mesaj: 'Bu sizin Vue Uygulamanızdır.'
 }
 },
 yöntemler: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#uygulama')
senaryo>
vücut>
html>

Yukarıdaki kod bloğu, v-eğer içeriği bir boole değişkeninin değerine göre koşullu olarak işleme yönergesi, kullanıcıları göster.

bu div değer ise öğe görüntülenir doğru ve varsa gizli YANLIŞ. tıklayarak Kullanıcıları Değiştir düğmesini tetikler ShowUsers() işlevini değiştir değerini değiştirme yöntemi kullanıcıları göster.

Bu örnek aynı zamanda v-açık düğmedeki tıklama olayı gibi olayları dinleme yönergesi. yeniden değerlendiriyor v-eğer direktif değeri ne zaman kullanıcıları göster değişiklikler.

v-show Direktifi ile Koşullu Oluşturmayı Gerçekleştirme

bu v-gösteri yönergesi, Vue.js'deki öğeleri koşullu olarak göstermenin veya gizlemenin başka bir yoludur. şuna benzer v-eğer Yönerge, bir Boole ifadesine dayalı olarak öğeleri işleyebilir. Bununla birlikte, iki direktif arasında bazı kritik farklılıklar bulunmaktadır.

bu v-gösteri yönerge, ifade false olarak değerlendirildiğinde öğeyi DOM'den kaldırmaz. Bunun yerine, öğenin özelliklerini değiştirmek için CSS'yi kullanır. görüntülemek arasındaki özellik hiçbiri ve orijinal değeri.

Bu, öğenin DOM'da hala mevcut olduğu ancak ifade yanlış olduğunda görünmediği anlamına gelir.

İşte bir örnek:

<vücut>
<divİD="uygulama">
<divv-eğer="kullanıcıları göster">
<Ul>
<li>Kullanıcı1li>
<li>Kullanıcı2li>
Ul>
div>
<düğmev-açık: tıklayın="ToggleShowUsers()">
 Kullanıcıları Değiştir
düğme>
<h1v-gösteri="kullanıcıları göster">{{ İleti }}h1>
div>
<senaryo>
 const uygulaması = Vue.createApp({
 veri () {
 geri dönmek {
 showUsers: doğru,
 mesaj: "Bunlar, Vue uygulamasının kullanıcılarıdır"
 }
 },
 yöntemler: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#uygulama')
senaryo>
vücut>

Yukarıdaki kod bloğu, v-gösteri belirten bir mesaj görüntülemek için direktif, 'Bunlar, Vue uygulamasının kullanıcılarıdır' geçiş düğmesini her tıkladığınızda.

v-if ve v-show Arasında Seçim Yapmak

kullanma arasında karar verirken v-eğer Ve v-gösteri Vue.js'deki öğeleri koşullu olarak göstermek veya gizlemek için yönergeler, dikkate alınması gereken bazı önemli faktörler vardır.

Durum nadiren değiştiğinde, v-eğer direktif iyidir. Bunun nedeni ise v-eğer koşul yanlış olduğunda, optimum performansı engelleyebilecek olan öğeyi DOM'dan kaldırır. Öğe yalnızca koşul doğru olduğunda işlenir ve koşul tekrar yanlış olduğunda DOM'dan kaldırılır.

Öte yandan, durum sık sık değişiyorsa, kullanmak daha iyidir. v-gösteri performansı artıran direktif. Bunun nedeni ise v-gösteri CSS görüntüleme özelliğini none ve block arasında değiştirerek öğeyi gizlemek veya göstermek için CSS'yi kullanır ve öğeyi her zaman DOM'da işlenir halde bırakır.

Vue Uygulamanızda Koşullu İşleme Kolaylaştırıldı

Vue uygulamalarında v-if ve v-show yönergeleriyle içeriği koşullu olarak oluşturmayı öğrendiniz. Bu direktifleri kullanarak, Vue bileşenlerinizin görünümü ve davranışı üzerinde size daha fazla kontrol sağlayarak çeşitli koşullara dayalı olarak içeriği hızlı bir şekilde işleyebilirsiniz.