Vue.js Koşullu Oluşturma

Vue.js'deki koşullu işleme, belirli koşullara göre öğeleri dinamik olarak görüntülemenize veya gizlemenize olanak tanır. Bu özellik, duyarlı ve etkileşimli kullanıcı arayüzleri oluşturmak için önemlidir. Vue.js, koşullu işlemeyi işlemek için çeşitli yönergeler sağlar ve uygulamanızdaki öğelerin görünürlüğünü etkili bir şekilde yönetmenizi sağlar.

v-if Yönergesi

v-if yönergesi, bir ifadenin doğruluğuna göre öğeleri koşullu olarak işlemek için kullanılır. İfade true olarak değerlendirilirse, öğe işlenir; aksi takdirde, DOM'a dahil edilmez. İşte temel bir örnek:

<template>
  <div>
    <p v-if="isVisible">This text is visible if 'isVisible' is true.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

Bu örnekte, paragraf öğesi yalnızca isVisibletrue olduğunda oluşturulur. Düğmeye tıklamak isVisible değerini değiştirir ve böylece paragrafın görünürlüğünü kontrol eder.

v-else Yönergesi

v-else yönergesi, v-if koşulu false olduğunda görüntülenecek alternatif bir içerik bloğu belirtmek için v-if ile birlikte kullanılabilir. İşte bir örnek:

<template>
  <div>
    <p v-if="isVisible">This text is visible if 'isVisible' is true.</p>
    <p v-else>This text is visible if 'isVisible' is false.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

Bu örnekte, isVisible, true olduğunda, ilk paragraf görüntülenir. isVisible, false olduğunda, bunun yerine ikinci paragraf gösterilir.

v-show Yönergesi

v-show yönergesi ayrıca öğeleri koşullu olarak işlemenize olanak tanır, ancak v-if yönergesinden farklıdır çünkü öğenin görünürlüğünü DOM'a eklemek veya kaldırmak yerine CSS display özelliğini kullanarak değiştirir. Bu, bir öğenin görünürlüğünü sık sık değiştirmeniz gerekiyorsa daha verimli olabilir.

<template>
  <div>
    <p v-show="isVisible">This text is visible if 'isVisible' is true.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

Bu örnekte, v-show yönergesi, display özelliğini ayarlayarak paragrafın görünürlüğünü kontrol eder. Öğe DOM'da kalır ancak isVisible değerine göre gizlenir veya gösterilir.

v-else-if Yönergesi

v-else-if yönergesi, koşullu işleme mantığınızda bir "else if" zinciri oluşturmak için kullanılır. Önceki v-if koşulunun karşılanmaması durumunda değerlendirmek için ek koşullar belirtmenize olanak tanır. İşte bir örnek:

<template>
  <div>
    <p v-if="status === 'loading'">Loading...</p>
    <p v-else-if="status === 'error'">Error occurred!</p>
    <p v-else>Content loaded successfully.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      status: 'loading'
    };
  }
};
</script>

Bu örnekte, görüntülenen içerik status özelliğinin değerine bağlıdır. v-if, v-else-if ve v-else yönergeleri farklı durumları işlemek için kullanılır.

Çözüm

Koşullu işleme, Vue.js ile etkileşimli ve dinamik uygulamalar geliştirmenin önemli bir yönüdür. v-if, v-else, v-show ve v-else-if gibi yönergeleri kullanarak, çeşitli koşullara göre öğelerin görüntülenmesini kontrol edebilirsiniz. Bu yönergeleri öğrenmek, Vue.js uygulamalarınızda daha duyarlı ve kullanıcı dostu arayüzler oluşturmanıza yardımcı olacaktır.