Tutorial zum Wechseln von Vue-Stilen und zur Verwendung dynamischer Vue-Stile

In diesem Artikel wird Ihnen das Tutorial zur Verwendung des Vue-Stils und des dynamischen Stils der ersten Ebene vorgestellt. Hier sind einige kleine Fälle, in denen Freunde in Not lernen können.

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 verwendet werden kann

Funktion zum Wechseln des Navigationsleistenstils, wenn wir ihn verwenden Zum Schreiben von JQuery müssen wir möglicherweise viel Code schreiben und dann Vue verwenden Klassenbindungs-API

css Schauen Sie sich unseren js-Code an. Abgesehen von den simulierten Daten verfügt er tatsächlich nur über eine einfache logische Verarbeitung, was im Vergleich viele Dinge spart zu den vorherigen verschiedenen Dom-Operationen.

<div id="wrap" class="box">
  <div v-for="(list,index) in navLists" class="nav" :class="{ red:changeRed == index}" @click="reds(index)">{{list.text}}</div>
</div>

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 wenn der Klassenname ein „-“-Zeichen hat, melden Sie sich ein Fehler,

Es gibt noch einen anderen

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie diese Fälle gelesen haben. Für weitere spannende Dinge zahlen Sie bitte Achten Sie auf andere chinesische PHP-Websites. Verwandte Artikel!

:class="{active: isActive}"

Verwandte Lektüre:

Der einfachste String-Matching-Algorithmus in PHP, PHP-Matching-Algorithmus_PHP-Tutorial

Das einfachste Tutorial zum chinesischen String-Matching-Algorithmus in PHP

class="[lineStyle(courseClick)]"
    lineStyle(isClick){
        if (isClick===true){
          return 'tab-items-current'
        }else {
          return 'class-tab-items'
        }
      }

So implementieren Sie die Stack-Datenstruktur in PHP und Codebeispiele des Bracket-Matching-Algorithmus

Das obige ist der detaillierte Inhalt vonTutorial zum Wechseln von Vue-Stilen und zur Verwendung dynamischer Vue-Stile. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!