Comment utiliser v-show et v-if dans Vue pour obtenir un rendu de page dynamique

Vue est un framework JavaScript populaire pour créer des applications Web dynamiques. v-show et v-if sont tous deux des instructions dans Vue pour le rendu dynamique des vues. Ils peuvent nous aider à mieux contrôler la page lorsque les éléments DOM ne sont pas affichés ou masqués. Cet article expliquera en détail comment utiliser les instructions v-show et v-if dans Vue pour obtenir un rendu de page dynamique.

La directive v-show dans Vue

v-show est une directive dans Vue qui affiche ou masque dynamiquement des éléments en fonction de la valeur d'une expression. Avec v-show, l'élément est toujours rendu dans le DOM et seul CSS est utilisé pour contrôler l'affichage ou le masquage.

La directive v-show peut être utilisée des manières suivantes :

<template>
  <div>
    <h1 v-show="showTitle">Dynamic Title</h1>

    <button @click="toggleTitle">Toggle Title</button>
  </div>
</template>

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

Dans le code ci-dessus, nous avons créé un bouton qui bascule l'affichage du titre. Nous nous lions à la variable showTitle et le titre ne sera affiché que si sa valeur est vraie. Cliquer sur le bouton fait passer la valeur showTitle dans la méthode toggleTitle à false et restitue le DOM. Dans ce cas, le titre disparaîtra du navigateur.

Directive v-if dans Vue

La directive v-if est utilisée pour restituer les éléments DOM uniquement si la condition spécifiée est vraie. Contrairement à v-show, v-if ajoute/supprime dynamiquement des éléments DOM.

La directive v-if peut être utilisée des manières suivantes :

<template>
  <div>
    <h2 v-if="isLoggedIn">Welcome, {{ username }}!</h2>

    <button @click="login">Log In</button>

    <button @click="logout">Log Out</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
      username: ''
    }
  },

  methods: {
    login() {
      this.isLoggedIn = true
      this.username = 'Your Username'
    },

    logout() {
      this.isLoggedIn = false
      this.username = ''
    }
  }
}
</script>

Dans le code ci-dessus, nous utilisons la directive v-if pour vérifier si vous êtes connecté ou non. Si vous êtes déjà connecté, nous rendons le message de bienvenue dans le DOM, sinon nous le masquons. Les méthodes de connexion et de déconnexion sont appelées lorsque nous cliquons sur le bouton de connexion ou de déconnexion et ces méthodes mettront à jour les données et le DOM.

La combinaison de v-show et v-if dans Vue

Dans de nombreux cas, nous devons restituer dynamiquement une certaine zone et afficher/masquer différents contenus en fonction de différentes situations. v-show et v-if peuvent être combinés pour obtenir ce type de rendu dynamique.

<template>
  <div>
    <div v-if="isActivated">
      <h3>Welcome, {{ name }}!</h3>
    </div>
    <div v-else>
      <h3>Please log in to access this page.</h3>
    </div>

    <button @click="toggleActivation">Activate/Deactivate</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActivated: false,
      name: 'Your Username'
    }
  },

  methods: {
    toggleActivation() {
      this.isActivated = !this.isActivated
    }
  }
}
</script>

Dans l'exemple ci-dessus, nous utilisons la directive v-if pour vérifier si elle est activée et afficher différentes vues. Si isActivated est vrai, nous restituons le message de bienvenue dans le DOM ; sinon, nous affichons le message pour authentifier l'utilisateur. Nous utilisons la directive v-show pour obtenir un affichage dynamique de certains contenus.

Avec un composant avec un bouton, nous pouvons utiliser toggleActivation pour basculer la valeur isActivated, modifiant ainsi le rendu de la vue DOM. En utilisant v-show et v-if ensemble, nous pouvons avoir un meilleur contrôle sur la page et la rendre plus dynamique et flexible.

Résumé

v-show et v-if sont deux instructions utiles dans Vue, utilisées pour contrôler l'affichage et le masquage des éléments DOM. v-show est utilisé pour contrôler simplement l'affichage/masquage du CSS, tandis que v-if ajoute/supprime dynamiquement des éléments DOM. L'utilisation conjointe de ces deux directives vous permet de mieux contrôler le rendu dynamique du DOM. Lors de la mise en œuvre du rendu de page dynamique Vue, nous devons décider d'utiliser v-show ou v-if et leur combinaison en fonction de la situation.

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!