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!