Shfaqja sipas kushtit në Vue

Direktiva tjetër që do të studiojmë quhet v-if. Me ndihmën e saj mund të shfaqim ose fshehim elementët. Si funksionon kjo direktivë: si parametër ajo pronë çdo veti të objektit data. Nëse kjo veti ka vlerën true - atëherë elementi do të jetë shfaqur, por nëse false - atëherë i fshehur.

Le të shohim një shembull. Le të themi se kemi një paragraf me atribut v-if. Vlera e këtij atributi le të jetë vetia visible, kështu:

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

Le të vendosim vlerën e vetisë sonë në true. Në këtë rast paragrafi do të shfaqet:

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

Por nëse visible vendoset në vlerë false, atëherë paragrafi do të fshihet:

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