Affichage conditionnel dans Vue

La directive suivante que nous allons étudier s'appelle v-if. Elle permet d'afficher ou de masquer des éléments. Son fonctionnement est le suivant : elle prend comme paramètre n'importe quelle propriété de l'objet data. Si cette propriété a la valeur true - alors l'élément sera affiché, et si false - il sera masqué.

Regardons un exemple. Supposons que nous ayons un paragraphe avec l'attribut v-if. La valeur de cet attribut est la propriété visible, comme ceci :

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

Définissons la valeur de notre propriété à true. Dans ce cas, le paragraphe sera affiché :

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

Mais si visible est défini à la valeur false, alors le paragraphe sera masqué :

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