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 v-if="isActive">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 v-if="isActive">Hello Vuejs</h1> <h1 v-else>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 v-if="isActive">Hello Vuejs</h1> <h1 v-else-if="isActive && a.length===0">You're vuejs</h1> <h1 v-else>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>Items are available</h1> <p>More items in the stock</p> </div> <div v-else> <h1>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!