Maison >interface Web >js tutoriel >Comment basculer entre les styles dans vue
Cet article explique principalement comment basculer entre les styles dans Vue et comment implémenter des styles dynamiques dans Vue. Cet article vous présente de manière très détaillée et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer
<.>Préface
Depuis que nous avons choisi vue, nous n'avons pas à penser à faire fonctionner le dom lors de la création des choses, laissez tout à vue. Ce qui suit est un effet très simple mais très courant, qui peut être utilisé par tout le monde Veuillez voir l'image ci-dessous Le fonction de changement de style de la barre de navigation, si nous utilisons quelque chose comme jquery pour écrire, nous devrons peut-être écrire beaucoup de code, alors nous utilisons vue,Le code est le suivant
html
Ci-joint l'API de liaison de style et de classe dans vue<p id="wrap" class="box"> <p v-for="(list,index) in navLists" class="nav" :class="{ red:changeRed == index}" @click="reds(index)">{{list.text}}</p> </p>
css
*{ padding: 0;margin: 0; } .box{ height: 40px; background: cyan; } .nav{ line-height: 40px; display: inline-block; margin-left: 100px; cursor: pointer; } .red{ color: red; } //前提是必须引入vuejs哦! var vm = new Vue({ el:"#wrap", data:{ navLists:[ { "text":"首页" }, { "text":"组件" }, { "text":"API" }, { "text":"我们" } ], changeRed:0 }, methods:{ reds:function(index){ this.changeRed = index; } } });Regardez de plus près notre code js. En plus des données simulées, il n'a en fait qu'un simple traitement logique. Par rapport aux différentes opérations précédentes sur dom, cela évite bien des problèmes.
Solution de style dynamique ps:vue
:class="{active: isActive}"Il n'y a rien à dire à ce sujet, mais il y a '-' dans la classe nom Il y a eu un rapport d'erreur lors de la signature du numéro, Il y en a un autre
class="[lineStyle(courseClick)]" lineStyle(isClick){ if (isClick===true){ return 'tab-items-current' }else { return 'class-tab-items' } }Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir . Articles associés :
Comment augmenter automatiquement les valeurs en JavaScript
Comment utiliser Redux dans les projets React (tutoriel détaillé)
Comment implémenter un flux de cascade de disposition aléatoire dans ionic3
Comment implémenter l'effet de retour en haut dans 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!