Comment comprendre le rendu conditionnel dans Vue.js ? (exemple de code)

Dans ce tutoriel, nous apprendrons à comprendre le rendu conditionnel dans Vue.js.

Qu'est-ce que le rendu conditionnel ?

Le rendu conditionnel signifie que si une certaine condition est vraie, alors à partir de dom Ajouter ou supprimer des éléments de .

Dans Vue, nous devons utiliser la directive v-if pour restituer les éléments de manière conditionnelle.

Voyons un exemple :

<template>
  <div>
  <!-- v-if="javascript expression" -->
   <h1 id="Hello-nbsp-Vuejs">Hello Vuejs</h1>
   <button @click="isActive= !isActive">点击</button>
  </div>
</template>

<script>

export default{
    data:function(){
        return{
            isActive:false
        }
    }
}
</script>

Dans le code ci-dessus, nous avons ajouté une directive isActive avec l'attribut v-if, donc si l'attribut isActive est true , les éléments h1 ne sont rendus que dans dom.

On peut également étendre la directive v-if après la directive v-else.

 <h1 id="Hello-nbsp-Vuejs">Hello Vuejs</h1>
   <h1 id="Hey-nbsp-Vuejs">Hey Vuejs</h1>

Si l'attribut isActive est vrai, le premier élément h1 sera rendu, sinon le deuxième élément h1 sera rendu dans le dom.

Nous pouvons également l'étendre davantage en utilisant le bloc v-else-if.

<h1 id="Hello-nbsp-Vuejs">Hello Vuejs</h1>
   <h1 id="You-re-nbsp-vuejs">You&#39;re vuejs</h1>
   <h1 id="Hey-nbsp-Vuejs">Hey Vuejs</h1>

Dans JavaScript, la directive v-else-if fonctionne comme un bloc else-if.

Remarque : Un élément v-else doit être immédiatement suivi d'un élément v-if ou d'un élément v-if-else, sinon il ne sera pas reconnu.

Comment rendre plusieurs éléments de manière conditionnelle ?

Parfois, nous devons rendre plusieurs éléments de manière conditionnelle, dans ce cas, nous devons combiner les éléments dans Together.

<template>
  <div v-if="available">
    <h1 id="Items-nbsp-are-nbsp-available">Items are available</h1>
    <p>More items in the stock</p>
  </div>
  <div v-else>
    <h1 id="Items-nbsp-are-nbsp-not-nbsp-available">Items are not available</h1>
    <p>Out of stock</p>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      available: true
    };
  }
};
</script>

Ici, nous regroupons plusieurs éléments au sein de la balise div.

Recommandations associées : "Tutoriel Javascript"

Cet article concerne l'explication détaillée du rendu conditionnel dans Vue.js I. j'espère que cela aidera les amis qui ont besoin d'aide !

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!