Vue'de Reaktif Koşul

Koşulun reaktif olmasını sağlayalım. Örneğin, bir butona tıklandığında öğenin gizlenmesini sağlayalım. Aşağıdaki paragrafa sahip olduğumuzu varsayalım:

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

Paragrafımızın başlangıçta görünür olmasını sağlayalım:

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

Şimdi, tıklandığında paragrafın gizleneceği bir buton yapalım:

App.vue<template>
  <button @click="hide">hide</button>
  <p v-if="visible">text</p>
</template>

Bağlanan metod, visible özelliğini false olarak değiştirecek ve böylece paragrafımızın gizlenmesine neden olacak:

javascriptmethods: {
  hide: function() {
    this.visible = false;
  }
}