Il est beaucoup plus facile de créer un élément HTML en fonction d’une condition dans Vue avec la v-if directive qu’avec du JavaScript pur.
Avec Vue, il suffit d’écrire la condition directement dans l’élément HTML que vous souhaitez créer de manière conditionnelle. C’est aussi simple que ça.
<!DOCTYPE html>
<html>
<head>
<title>Typewriters</title>
<style>
#app {
border: dashed black 1px;
width: 130px;
padding-left: 20px;
font-weight: bold;
background-color: lightgreen;
}
</style>
</head>
<body>
<h1>Example with 'v-if' and 'v-else'</h1>
<p>Try changing the 'typewritersInStock' value in the Vue instance from 'true' to 'false' and run the code again.</p>
<div id="app">
<p v-if="typewritersInStock">
in stock
</p>
<p v-else>
not in stock
</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
typewritersInStock: false
}
}
})
app.mount('#app')
</script>
</body>
</html>
Directives relatives au rendu conditionnel
Cet aperçu::preview décrit comment les différentes directives Vue utilisées pour le rendu conditionnel sont utilisées ensemble.
| Directif | Détails |
|---|---|
v-if | Peut être utilisé seul ou avec v-else-ifet/ou v-else. Si la condition interne v-ifest « vraie », v-else-ifou v-elsene sont pas prises en compte. |
v-else-if | Doit être utilisé après v-ifou un autre v-else-if. Si la condition à l’intérieur v-else-ifest « vraie », v-else-ifou v-elsesi celle qui suit n’est pas prise en compte. |
v-else | Cette partie s’exécutera si la première partie de l’instruction if est fausse. Elle doit être placée tout à la fin de l’instruction if, après v-ifet v-else-if. |
Pour voir un exemple avec les trois directives présentées ci-dessus, nous pouvons développer l’exemple précédent v-else-ifafin que l’utilisateur voie « En stock », « Très peu en stock ! » ou « Rupture de stock » :