Vue Academy · Ders

Koşullar ve Döngüler

v-if ile koşullu, v-for ile liste tabanlı işleme yapın.

Koşullar ve Döngüler, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 3 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 3 dersten oluşur.

Koşullu Oluşturma

Vue, verilere göre kullanıcı arayüzünün bölümlerini göstermenize veya gizlemenize olanak tanır.

v-if bir öğeyi koşula bağlı olarak oluşturur
v-else-if ve v-else koşulları birbirine bağlar
v-show görünürlüğü açıp kapatır

v-if

v-if yönergesi, bir öğeyi yalnızca ifadesi doğru olarak değerlendirildiğinde oluşturur.

<p v-if="isLoggedIn">Welcome back!</p>
<p v-if="cart.length === 0">Your cart is empty.</p>

v-else-if ve v-else

Koşulları v-else-if ve v-else ile birbirine bağlayın. Bu yönergeler doğrudan bir v-if yönergesinin ardından gelmelidir.

<p v-if="score >= 90">Grade: A</p>
<p v-else-if="score >= 80">Grade: B</p>
<p v-else-if="score >= 70">Grade: C</p>
<p v-else>Grade: F</p>

v-show

v-show, öğeyi her zaman oluşturur; ancak CSS display özelliğini açıp kapatır.

<div v-show="isVisible">
  This div stays in the DOM,
  only display:none toggles.
</div>

v-if ve v-show Karşılaştırması

Temel fark:

v-if, öğeyi DOM'a tamamen ekler veya DOM'dan tamamen kaldırır
v-show, öğeyi DOM'da tutar ve yalnızca display özelliğini değiştirir

Sık sık açılıp kapanan şeyler için v-show kullanın. Koşul nadiren değişiyorsa veya öğenin oluşturulması maliyetliyse v-if kullanın.

Diziler Üzerinde v-for

v-for yönergesi, bir dizi üzerinde yineleme yaparak liste oluşturur.

<ul>
  <li v-for="fruit in fruits">{{ fruit }}</li>
</ul>

<!-- data: fruits = ["Apple", "Banana", "Cherry"] -->

Dizinle Birlikte v-for

v-for, her öğenin dizinini de sağlayabilir.

<ul>
  <li v-for="(item, index) in items">
    {{ index }}: {{ item }}
  </li>
</ul>

:key Kullanmanın Önemi

v-for kullanırken her zaman benzersiz bir :key sağlayın.

Vue'nun her düğümün kimliğini izlemesine yardımcı olur
Verimli ve doğru DOM güncellemelerini mümkün kılar
Öğeler yeniden sıralandığında dizi dizini yerine kararlı ve benzersiz bir kimlik kullanın

<li v-for="user in users" :key="user.id">
  {{ user.name }}
</li>

:key Neden Önemlidir?

İyi bir anahtar olmadan, liste değiştiğinde Vue yanlış öğeleri yeniden kullanabilir.

Form girdileri yanlış değeri koruyabilir
Animasyonlarda bozulmalar görülebilir
Durum yanlış satıra bağlanabilir

Kararlı ve benzersiz bir anahtar bu hataları önler.

Nesneler Üzerinde v-for

v-for, isteğe bağlı anahtar ve dizinle birlikte bir nesnenin özellik değerleri üzerinde yineleme yapabilir.

<li v-for="(value, key) in userProfile" :key="key">
  {{ key }}: {{ value }}
</li>

<!-- userProfile = { name: "Ada", age: 36 } -->

v-for ve Koşulları Birleştirme

Bir listeyi filtrelemek için v-if'i v-for ile aynı öğeye yerleştirmek yerine bir hesaplanan özellik kullanmayı tercih edin.

<!-- Filter in a computed, then loop -->
<li v-for="task in activeTasks" :key="task.id">
  {{ task.title }}
</li>

<!-- activeTasks is a computed that
     returns only unfinished tasks -->

Hızlı Kontrol

Koşullu ifadeleri ve döngüleri ne kadar anladığınızı test edin.

Özet: Koşullu İfadeler ve Döngüler

Liste ve koşullu oluşturmayı öğrendiniz:

v-if / v-else-if / v-else koşula bağlı olarak oluşturur
v-show yalnızca görünümü açıp kapatır
v-for diziler ve nesneler üzerinde yineleme yapar
Her zaman benzersiz bir :key ekleyin
Listeleri hesaplanan özelliklerle filtreleyin

Sıradaki konu: öznitelik ve sınıf bağlama.

Sıkça Sorulan Sorular

“Koşullar ve Döngüler” dersi ücretsiz mi?

Evet — “Koşullar ve Döngüler” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 3 dersten oluşur.

“Koşullar ve Döngüler” dersinde ne öğreneceğim?

v-if ile koşullu, v-for ile liste tabanlı işleme yapın. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 2. dersidir.

“Koşullar ve Döngüler” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Vue Academy Sayfasına Dön