suchen

Heim  >  Artikel  >  Web-Frontend  >  Wie ändere ich einen Tag-Stil in Vue?

Wie ändere ich einen Tag-Stil in Vue?

亚连
亚连Original
2018-06-11 15:30:073533Durchsuche

In diesem Artikel wird hauptsächlich die Methode zum dynamischen Ändern des Stils eines Tags in Vue vorgestellt. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

Das Unternehmen wird ein ähnliches Projekt wie Toutiao durchführen. Es wird eine HTML5-Seite erstellen, die zuerst ausgeführt werden soll die Wirkung. Die Navigation im Header von Toutiao kann gescrollt und Kategorien hinzugefügt werden, und das Gleiche gilt auch für unser Projekt. Daher müssen Sie beim Navigieren auf verschiedene Kategorien klicken, und der Stil ändert sich entsprechend. Ich habe im Internet gesucht und den folgenden Code gefunden, der jedoch prägnant und klar ist, also werde ich ihn posten Schauen Sie sich zuerst den Code für alle an. Wenn Sie die URL wissen möchten, können Sie sie online durchsuchen. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .active{
      color: red;
    }
  </style>
</head>
<body>
  <p id="app">
    <button v-for=&#39;item in isp&#39; @click=&#39;f1($index)&#39; 
    :class="{&#39;active&#39;: $index === isActive}">{{item}}</button>
  </p>

  <script type="text/javascript" src=&#39;vue.js&#39;></script>
  <script>
    new Vue({
      el:&#39;#app&#39;,
      data:{
        isActive:0,
        isp: [&#39;BGP&#39;,&#39;中国电信&#39;,&#39;中国联通&#39;,&#39;联通电信双线&#39;]
      },
      methods:{
        f1:function(index){
          this.isActive=index
        }
      }
    })
  </script>
</body>
</html>

Wie folgt:

vue ändert dynamisch den Stil einer tag.jpeg

Das Folgende ist der Code in meinem Projekt :

Für den obigen Code verwendet der Autor Vue Version 1.0, und unten verwende ich Version 2.0. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .red-link{
      color: red;
    }
  </style>
</head>
<body>
  <p id="app">
    <a href="javascript:void (0);" rel="external nofollow" class="box1-item" 
       v-for="(item, index) in menu"
       :class="{ &#39;red-link&#39;:index === isActive }" 
       v-on:click.stop.prevent=&#39;switchTab(index)&#39;>
       {{ item }}
    </a>
  </p>

  <script type="text/javascript" src=&#39;vue.js&#39;></script>
  <script>
    new Vue({
      el:&#39;#app&#39;,
      data:{
        isActive:0,
        menu: [&#39;推荐&#39;, &#39;人物&#39;, &#39;干货&#39;, &#39;行业&#39;, &#39;融资&#39;,&#39;�教育&#39;,&#39;大数据&#39;],
      },
      methods:{
        switchTab: function (index) {
          this.isActive = index;
        }
      }
    })
  </script>
</body>
</html>

Der Code ist im Grunde derselbe, ich habe ihn nur selbst organisiert, damit ich ihn bei der nächsten Verwendung leichter finden kann. Ich hoffe auch, dass Freunde, die ihn benötigen, ihn verwenden können.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie Baidu Map zum Implementieren eines Kartenrasters

Verwenden Sie Selen, um Taobao-Dateninformationen zu erfassen

Wie nutzt das WeChat-Applet Promise, um Rückrufe zu implementieren?

Das Problem, dass Electron nicht mit npm installiert werden kann

Verwendung von fullpage.js zum Implementieren des Scrollens

So entwickeln Sie Komponentenbibliotheken mit React

Das obige ist der detaillierte Inhalt vonWie ändere ich einen Tag-Stil in Vue?. 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
Vorheriger Artikel：Was sind 7 praktische Tipps zu ES6?Nächster Artikel：Was sind 7 praktische Tipps zu ES6?

In Verbindung stehende Artikel

Mehr sehen