Vue'da Koşula Göre Görüntüleme

İnceleyeceğimiz bir sonraki direktifin adı v-if. Onun yardımıyla öğeleri gösterebilir veya gizleyebiliriz. Bu direktif nasıl çalışır: parametre olarak data nesnesinin herhangi bir özelliğini alır. Eğer bu özellik true değerine sahipse - öğe görüntülenecek, eğer false ise - gizlenecektir.

Bir örnek üzerinden inceleyelim. Diyelim ki v-if özniteliğine sahip bir paragrafımız var. Bu özniteliğin değeri visible özelliği olsun, işte şu şekilde:

App.vue<template>
  <p v-if="visible">text</p>
</template>

Özelliğimizin değerini true olarak ayarlayalım. Bu durumda paragraf görüntülenecek:

javascriptdata() {
  return {
    visible: true,
  }
}

Ancak eğer visible özelliğine false değeri verilirse, paragraf gizlenecek:

javascriptdata() {
  return {
    visible: false,
  }
}