Conditions v-if et v-show

Rendu conditionnel avec v-if

Si une donnée n'est pas vide

Certains éléments sont pertinents à afficher uniquement lorsqu'ils contiennent une valeur.

Par exemple, une bulle 🗨️ permettant d'afficher l'année de naissance 📅 birth d'une personne n'est désirable que s'il y a une année à afficher.

Si cette information n'est pas fournie, avoir une bulle vide 🗨️ est indésirable au niveau visuel.

<div class="bubble" v-if="birth">{{ birth }}</div>

See the Pen DEMO VueJS | v-if by TIM Montmorency (@tim-momo ) on CodePen .

En savoir plus sur Rendu conditionnel - Conditional Rendering

Autre condition v-if

Outre le fait de vérifier si une donnée est vide ou non, il est aussi possible d'ajouter une condition de comparaison directement dans v-if.

Par exemple:

<div class="bubble" v-if="birth>=2000">{{ birth }}</div>

Ou encore comparer la valeur de deux données:

<div v-if="firstName==lastName">{{ firstName }}</div>

Ou encore vérifier si une donnée bouléenne est égal à true:

<div v-if="isOrange">Je suis orange</div>

Sinon avec v-else

Vous pouvez utiliser la directive v-else pour indiquer un bloc "sinon" lié à un v-if:

HTML

<div id="app">
  <button @click="toggleNotifications">
    {{ notificationsOn ? 'Désactiver' : 'Activer' }} les notifications
  </button>

  <div v-if="notificationsOn">
    <h2>🔔 Notifications activées !</h2>
    <p>Vous recevrez désormais toutes les alertes importantes.</p>
  </div>
  <div v-else>
    <h2>🔕 Notifications désactivées</h2>
    <p>Aucune alerte ne sera affichée.</p>
  </div>
</div>

JavaScript

const app = Vue.createApp({
  data() {
    return {
      notificationsOn: false
    }
  },
  methods: {
    toggleNotifications() {
      this.notificationsOn = !this.notificationsOn
    }
  }
})
app.mount('#app')

Affichage conditionnel avec v-show

Une autre option pour afficher conditionnellement un élément est la directive v-show. L'utilisation est sensiblement la même :

HTML

<div id="app">
  <button @click="toggleDetails">
    {{ showDetails ? 'Cacher les détails' : 'Afficher les détails' }}
  </button>

  <p v-show="showDetails">
    Voici un paragraphe qui peut être affiché ou masqué grâce à <code>v-show</code>.
  </p>
</div>

JavaScript

const app = Vue.createApp({
  data() {
    return {
      showDetails: false
    }
  },
  methods: {
    toggleDetails() {
      this.showDetails = !this.showDetails
    }
  }
})

app.mount('#app')

La différence est qu'un élément avec v-show sera toujours rendu et restera dans le DOM (dans le HTML); v-show bascule uniquement la propriété CSS display de l'élément, en basculant de display: none à display:block par exemple.

En savoir plus sur le rendu conditionnel

Dans le cadre de ce cours, n'oubliez pas de toujours consulter la docmentation avec l'API Options

Dans un exemple réel

Les personnages de Rick and Morty, chargés depuis une API (Application Programming Interface) publique. Dans l'onglet HTML, v-if="message" : le message (« Chargement... », « Aucun personnage trouvé. ») s'affiche seulement s'il n'est pas vide.