VueJs: les instructions de base
Dans VueJs, les instructions ou plutôt directives de base sont celles qu’on retrouve dans tous les langages de programmation: l’affichage conditionnel IF, ELSEIF, ELSE et les boucles FOR.
Pré requis
Tous mes exemples jusqu’à présent ne nécessitait qu’un notepad et un browser. Dans les exemples ci-dessous, je vous parlerai d’images : Mr/Mme/?, voici les liens vers ces images:
Affichage conditionnel V-IF, V-ELSE-IF et V-ELSE
L’équivalent du IF en VueJs, c’est V-IF qui se place comme attribut des éléments HTML pour conditionner leur affichage.
Comme pour le IF, on a un ELSE IF (si la première condition du IF n’est pas remplie, on passe à la suivante avec ELSE IF, puis de nouveau un ELSE-IF etc.) ensuite si aucune des conditions n’est remplie, on finit par un ELSE.
Imaginons qu’on ait une image de Mr, une image de Mme et une image ‘?’ à afficher en fonction d’une sélection dans une combo qui affiche Mr/Mme.
On va simplement créer les 3 images et conditionner leur affichage en fonction de cette valeur:
- Si gender==Mr on affiche l’image Mr.png
- Sinon si gender==Mme on affiche Mme.png
- Sinon on affiche unknown.png (le point d’interrogation)
Voici déjà le code pour stocker la valeur Mr/Mme sélectionnée:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<select id="gender" v-model:selected="gender">
<option value="Mr" selected>Mr</option>
<option value="Mme">Mme</option>
</select>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
gender: ''
}
});
</script>
</body>
</html>Maintenant, on va simplement créer les 3 images comme expliqué plus haut et conditionner leur affichage via les directives V-IF, V-ELSE-IF et V-ELSE :
<image src="Mr.png" v-if="gender=='Mr'"/>
<image src="Mme.png" v-else-if="gender=='Mme'"/>
<image src="unknown.jpg" v-else/>Et voici le code complet:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<select id="gender" v-model:selected="gender">
<option value="Mr" selected>Mr</option>
<option value="Mme">Mme</option>
</select>
<image src="Mr.png" v-if="gender=='Mr'"/>
<image src="Mme.png" v-else-if="gender=='Mme'"/>
<image src="unknown.jpg" v-else/>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
gender: ''
}
});
</script>
</body>
</html>Les boucles v-for
A présent, imaginons que l’on ait dans nos variables VueJs, une liste de genres donc une liste avec soit Mr, soit Mme ou autre chose comme valeur et on veut afficher une image pour chaque Mr ou Mme ou ?.
Voici déjà le code de la liste:
data: {
genderList: [
'Mr',
'?',
'Mme',
'Mr'
]
}A présent mettons nos 3 images dans une boucle en disant: pour chaque variable gender de notre liste genderList, on va utiliser la variable gender pour afficher l’image de Mr ou de Mme ou si on a autre chose le ‘?’.
Voici le code complet:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="gender in genderList">
<image src="Mr.png" v-if="gender=='Mr'"/>
<image src="Mme.png" v-else-if="gender=='Mme'"/>
<image src="unknown.jpg" v-else/>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
genderList: [
'Mr',
'?',
'Mme',
'Mr'
]
}
});
</script>
</body>
</html>Voici 4 petites instructions de base qui vous permettront déjà de faire pas mal de choses. D’autres instructions viendront avec les prochains articles alors n’hésitez pas à commenter et partager cet article s’il vous a plut et à vous abonner à ce blog qui vous ne voulez rien manquer. A très bientôt.
