Découvrir Vue.js 2

Afficher ou cacher avec une condition

Testez gratuitement nos 1326 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Dans un template, il est utile d'afficher ou de cacher un objet complet à partir d'une règle métier. Julien Moulin vous explique comment activer cette fonctionnalité.
04:23

Transcription

On a vu que < nous permet d'itérer une collection. Et je vais vous montrer qu'on peut aussi utiliser de la condition sur les collections. C'est-à-dire que on peut utiliser < qui va nous permettre de vérifier une condition et d'afficher le message que si on est, par exemple, sur un espace de nom particulier. Alors pourquoi je parle d'espace de nom? Tout simplement parce qu'on va venir modifier le addLog. J'aimerais, de temps en temps, pouvoir avoir un type de message, et donc référencer un type de message, ici, et n'afficher le type de message que s'il est renseigné donc, du coup, que si c'est du user. Si c'est à destination de l'utilisateur, je vais le renseigner, sinon, non. Je vais créer ici, une variable type qui va être égale à type s'il est renseigné, sinon à utilisateur de base, comme ça, ça m'évite d'avoir à tout modifier. Et puis je vais aussi me créer des messages que je vais insérer dans les log. Alors oui, vous allez me dire, effectivement la < qu'on a ici, elle risque ici, de plus fonctionner. C'est pas très grave, ça vous fera un cas pratique à essayer de débuguer. Alors, nous on va avancer sur cette partie-là. Ici, ce que l'on va créer en plus, c'est des messages que l'on va ajouter. Donc, ça va être quoi? < pour le coup. Le message ça va être quoi? Ca va être message pour le coup, ça va plus du tout être un type, ça va être un objet. Et puis en type, ici, je vais lui mettre que ce que je stocke, c'est du coup ici, le round. Voilà. Donc je vais faire un canal qui va s'appeler < dans lequel je vais stocker des informations. Plusieurs choses superbes avec ça, C'est que d'abord on va pouvoir stocker les informations avant chaque clic de la précision exacte, où se trouvait le rond, quelle taille il avait, etc. Ca va nous permettre de pouvoir faire des stats. Alors vous voyez que là, je vais simplement répercuter size, top, et left pour les garder de coté, et pourquoi pas plus tard faire des statistiques sur le nombre de clics, quand il est à tel endroit etc. Vous pouvez aller très loin dans les statistiques et faire exactement ce que vous voulez ensuite, avec votre interface. Donc ça, moi, je vous conseille de le faire, et de le garder de côté. Alors évidemment ça, on pourra pas l'exploiter comme ça, il faudra l'envoyer à un serveur à moment ou à un autre. Ca vous permet quand même de constituer des messages et de les mettre de côté. Alors maintenant que j'ai fait ça, addLog, alors attention c'est pas addaddLog, c'est addLog, voilà, this.addLog, on l'enregistre, et normalement, ça veut dire que dans notre interface on devrait avoir 2 choses qui existent. Alors on a un <, pour le type, on a redéclaré le type. Alors faites attention à ça, oui. Il est un peu tatillon là-dessus, il vaut mieu lui mettre < ici, sinon, il va vous dire vous redéclarer quelque chose à l'intérieur, bon il aime pas trop. Pensez à recharger votre interface aussi. Maintenant qu'est-ce qui se passe? Alors regardez. Ca c'est génial, c'est que, quand on va afficher un objet, il est affiché en entier. Je vais cliquer dessus et donc du coup, c'est ça le dernier message qui va être ajouté. Alors ça m'embête parce que je n'ai plus les informations du clic. C'est pas très très grave. Comment avoir les informations du clic? On va simplement ici, venir travailler sur cette partie là, et on va ajouter un v-if. Et le v-if, qu'est-ce qu'il va faire? Il va vérifier une condition. On ne va afficher les messages donc, que s'ils ont le type utilisateur, le type user. Donc on va faire <. En faisant ça, vous allez déclarer que vous ne voulez que ces informations là et donc vous allez voir que, effectivement, ce ne sont que ces infos que vous allez avoir. Si vous voulez garder une cohérence dans les index, on sait pour le moment, qu'on enregistre 2 messages. Les informations, puis surtout les différents clics. Donc on peut diviser ça par 2. Donc, au final, pour avoir les vrais identifiants. Alors attention parcequ'en les divisant par 2, vous allez avoir un petit problème ici, parce qu'à chaque fois qu'on va ajouter ça va rediviser par 2, ça va faire un petit peu bizarre du coté des identifiants pour les messages. Mais ça à la limite, c'est pas très grave parce que vous vous les gardez de côté, donc au final, c'est pas embêtant. Et en plus on garde une cohérence ici, dans le nombre de clics, c'est ce qu'on veut. Voilà comment on vient travailler sur des types différents et surtout qu'on peut conditionner pour avoir de l'information différente. Vous avez vu v-if que vous pouvez utiliser absolument partout. Ca s'utilisera partout de la même manière, vous pouvez même l'utiliser dans des endroits un peu particuliers. Ce qui veut dire que v-if pourrait être aussi utlisé au niveau du player, là quand on faisait le hide, ça peut être un v-if qu'on vient utiliser sans aucun souci.

Découvrir Vue.js 2

Animez et rendez réactive la vue d’une application web avec le framework Vue.js. Mettez en place les interfaces web de demain​ ​et utilisez les librairies externes de votre choix.

2h25 (44 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Vue.js Vue.js 2.1
Spécial abonnés
Date de parution :14 févr. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !