Maison > interface Web > js tutoriel > vue2.0 change la méthode d'affichage du style en fonction de la valeur d'état

vue2.0 change la méthode d'affichage du style en fonction de la valeur d'état

亚连
Libérer: 2018-05-30 15:33:16
original
2837 Les gens l'ont consulté

Maintenant, je vais partager avec vous une méthode d'affichage de changement de style vue2.0 basée sur la valeur de statut. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

Lorsque les utilisateurs effectuent des opérations de processus, elles sont généralement divisées en en cours, pas encore démarrées et terminées. La page frontale doit afficher les distinctions d'état correspondantes. Ce qui est testé ici, c'est la distinction des couleurs d'arrière-plan.

démo :

<span class="contract-span" :class="statusText[item.status][0]">{{statusText[item.status][1]}}</span>
Copier après la connexion

   statusText: {
    0: [&#39;span-delay&#39;, &#39;进行中&#39;],
    1: [&#39;span-finish&#39;, &#39;已完成&#39;],
    2: [&#39;span-rough&#39;, &#39;未开始&#39;],
   },//显示状态
Copier après la connexion

En attribuant des valeurs au statut lors du parcours de boucle, vous pouvez afficher différentes couleurs d'arrière-plan dans différents états.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Exemple de la fonction de téléchargement d'images dans la base de données et de leur affichage sur la page implémentée par vue

Résolu avec vue. Le problème d'échec après le routage js

Comment analyser parfaitement les données en js

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal