Application avancée de Vue : utilisation pratique de v-if, v-show, v-else, v-else-if pour obtenir un rendu conditionnel complexe

Application avancée Vue : v-if, v-show, v-else, v-else-if pratiques pour obtenir un rendu conditionnel complexe

Introduction :
Vue.js est un framework JavaScript populaire pour créer une interface utilisateur. Il fournit une multitude d'instructions, notamment v-if, v-show, v-else, v-else-if, pour le rendu et l'affichage des éléments DOM selon différentes conditions. Dans cet article, nous explorerons comment exploiter ces directives pour implémenter un rendu conditionnel complexe, en l'illustrant avec des exemples de code concrets. La directive

1. v-if
   v-if est utilisée pour restituer dynamiquement les éléments DOM en fonction de conditions données. Son utilisation est simple, ajoutez la directive v-if sur l'élément qui doit être rendu conditionnellement et liez-le à une expression qui renvoie une valeur booléenne. Si l'expression est évaluée à vrai, l'élément sera rendu, sinon il sera supprimé.

Exemple de code :

<template>
  <div>
    <div v-if="showMessage">Hello World!</div>
    <button @click="toggleMessage">Toggle Message</button>
  </div>
</template>

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

Dans l'exemple ci-dessus, nous changeons la valeur de showMessage lorsque vous cliquez sur le bouton, contrôlant ainsi l'affichage et le masquage de Hello World !.

2. v-show
   La directive v-show est également utilisée pour afficher ou masquer des éléments DOM en fonction de conditions données. Son utilisation est similaire à v-if, mais la différence est que v-show masque et affiche uniquement les éléments en modifiant l'attribut d'affichage de l'élément, plutôt qu'en insérant ou en supprimant des éléments.

Exemple de code :

<template>
  <div>
    <div v-show="showMessage">Hello World!</div>
    <button @click="toggleMessage">Toggle Message</button>
  </div>
</template>

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

De même, en cliquant sur le bouton pour changer la valeur de showMessage, nous pouvons contrôler l'affichage et le masquage de Hello World !.

3. v-else
   La directive v-else est utilisée pour restituer les éléments DOM dans un bloc else lorsque les conditions de la directive v-if ou v-show ne sont pas remplies. Notez que v-else doit être sous le même élément parent immédiatement après la directive v-if ou v-show.

Exemple de code :

<template>
  <div>
    <div v-if="showMessage">Hello World!</div>
    <div v-else>Goodbye World!</div>
    <button @click="toggleMessage">Toggle Message</button>
  </div>
</template>

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

Sur la base de l'exemple ci-dessus, lorsque la valeur de showMessage est fausse, "Goodbye World !"

4. v-else-if
   La directive v-else-if est utilisée pour déterminer une autre condition et restituer l'élément DOM correspondant lorsque la condition de la directive v-if ou v-show n'est pas remplie. Notez également que v-else-if doit suivre la directive v-if ou v-show et être situé sous le même élément parent.

Exemple de code :

<template>
  <div>
    <div v-if="messageType === 'success'">Success!</div>
    <div v-else-if="messageType === 'warning'">Warning!</div>
    <div v-else-if="messageType === 'error'">Error!</div>
    <div v-else>Info!</div>
    <button @click="changeMessageType">Change Message Type</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messageType: 'success'
    };
  },
  methods: {
    changeMessageType() {
      if (this.messageType === 'success') {
        this.messageType = 'warning';
      } else if (this.messageType === 'warning') {
        this.messageType = 'error';
      } else if (this.messageType === 'error') {
        this.messageType = '';
      } else {
        this.messageType = 'success';
      }
    }
  }
};
</script>

Dans l'exemple ci-dessus, en cliquant sur le bouton, nous pouvons parcourir différents types de messages.

Résumé :
Dans cet article, nous présentons l'utilisation des instructions v-if, v-show, v-else et v-else-if dans Vue à travers des exemples de code spécifiques. Ces instructions nous fournissent un moyen flexible de contrôler les éléments DOM, nous permettant de restituer dynamiquement la page selon différentes conditions. Maîtriser l'utilisation de ces instructions nous aidera à mieux créer des interfaces utilisateur complexes.

Référence :

• Documentation officielle de Vue.js : https://vuejs.org/

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!