Rendu conditionnel Vue.js

Le rendu conditionnel dans Vue.js vous permet d'afficher ou de masquer dynamiquement des éléments en fonction de certaines conditions. Cette fonctionnalité est essentielle pour créer des interfaces utilisateur réactives et interactives. Vue.js fournit plusieurs directives pour gérer le rendu conditionnel, vous permettant de gérer efficacement la visibilité des éléments de votre application.

Directive v-si

La directive v-if est utilisée pour afficher des éléments de manière conditionnelle en fonction de la véracité d'une expression. Si l'expression est évaluée à true, l'élément est affiché; sinon, il n'est pas inclus dans le DOM. Voici un exemple de base:

<template>
  <div>
    <p v-if="isVisible">This text is visible if 'isVisible' is true.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

Dans cet exemple, l'élément paragraphe est rendu uniquement si isVisible est true. Cliquer sur le bouton permet de changer la valeur de isVisible et donc de contrôler la visibilité du paragraphe.

Directive v-else

La directive v-else peut être utilisée conjointement avec v-if pour spécifier un bloc de contenu alternatif à afficher lorsque la condition v-if est false. Voici un exemple:

<template>
  <div>
    <p v-if="isVisible">This text is visible if 'isVisible' is true.</p>
    <p v-else>This text is visible if 'isVisible' is false.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

Dans cet exemple, lorsque isVisible est égal à true, le premier paragraphe est affiché. Lorsque isVisible est égal à false, le deuxième paragraphe est affiché à la place.

Directive v-show

La directive v-show vous permet également de restituer des éléments de manière conditionnelle, mais elle diffère de v-if en ce qu'elle bascule la visibilité de l'élément à l'aide de la propriété CSS display plutôt que de l'ajouter ou de la supprimer du DOM. Cela peut être plus efficace si vous devez fréquemment basculer la visibilité d'un élément.

<template>
  <div>
    <p v-show="isVisible">This text is visible if 'isVisible' is true.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

Dans cet exemple, la directive v-show contrôle la visibilité du paragraphe en définissant sa propriété display. L'élément reste dans le DOM mais est masqué ou affiché en fonction de la valeur isVisible.

Directive v-else-if

La directive v-else-if est utilisée pour créer une chaîne "else if" dans votre logique de rendu conditionnel. Elle vous permet de spécifier des conditions supplémentaires pour évaluer si la condition v-if précédente n'est pas remplie. Voici un exemple:

<template>
  <div>
    <p v-if="status === 'loading'">Loading...</p>
    <p v-else-if="status === 'error'">Error occurred!</p>
    <p v-else>Content loaded successfully.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      status: 'loading'
    };
  }
};
</script>

Dans cet exemple, le contenu affiché dépend de la valeur de la propriété status. Les directives v-if, v-else-if et v-else sont utilisées pour gérer différents états.

Conclusion

Le rendu conditionnel est un aspect crucial du développement d'applications interactives et dynamiques avec Vue.js. En utilisant des directives telles que v-if, v-else, v-show et v-else-if, vous pouvez contrôler l'affichage des éléments en fonction de diverses conditions. La maîtrise de ces directives vous aidera à créer des interfaces plus réactives et plus conviviales dans vos applications Vue.js.