Heim  >  Artikel  >  Backend-Entwicklung  >  Tutorial zum Wechseln von Vue-Stilen und zur Verwendung dynamischer Vue-Stile

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

php中世界最好的语言
php中世界最好的语言Original
2017-12-20 11:51:533817Durchsuche

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 &#39;tab-items-current&#39;
        }else {
          return &#39;class-tab-items&#39;
        }
      }


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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn