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