So wechseln Sie zwischen Stilen in Vue

In diesem Artikel wird hauptsächlich beschrieben, wie Sie zwischen Stilen in Vue wechseln und dynamische Stile in Vue implementieren. Dieser Artikel stellt Sie ausführlich vor und hat Referenzwert.

Vorwort

Da wir uns für vue entschieden haben, müssen wir bei der Herstellung nicht über die Bedienung des Doms nachdenken, sondern überlassen alles Vue.

Das Folgende ist ein sehr einfacher, aber sehr häufiger Effekt, der von jedem genutzt werden kann

Bitte sehen Sie sich das Bild unten an

Der Stilwechselfunktion der Navigationsleiste: Wenn wir zum Schreiben etwas wie JQuery verwenden, müssen wir möglicherweise viel Code schreiben, dann verwenden wir Vue,

Der Code lautet wie folgt

html

Angehängt ist die Stil- und Klassenbindungs-API in 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 🎜> Schauen Sie sich unseren js-Code genauer an. Zusätzlich zu den simulierten Daten verfügt er tatsächlich nur über eine einfache logische Verarbeitung. Im Vergleich zu den vorherigen verschiedenen Vorgängen auf dom erspart dies viel Ärger.

ps:vue dynamische Stillösung

 *{
        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;
        }
      }
    });

Dazu gibt es nichts zu sagen, aber es gibt ein „-“-Zeichen in der Klasse Name Wenn Sie Fehler melden,

Es gibt noch einen anderen

:class="{active: isActive}"

Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So erhöhen Sie automatisch Werte in JavaScript

So verwenden Sie Redux in React-Projekten (ausführliches Tutorial)

So implementieren Sie einen Wasserfallfluss mit zufälligem Layout in ionic3

So implementieren Sie den Back-to-Top-Effekt in JS

Das obige ist der detaillierte Inhalt vonSo wechseln Sie zwischen Stilen in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!