Vue implementiert Tab-Tab-Umschaltung

In diesem Artikelbeispiel wird der spezifische Code von Vue zur Implementierung des Tab-Tab-Umschaltens zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Klicken Sie auf die verschiedenen Titel, um die entsprechenden Bilder anzuzeigen

Der Code lautet wie folgt

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <script src="js/vue.js" type="text/javascript"></script>
</Kopf>
<Stil>
    *{
        Rand: 0px;
        Polsterung: 0px;
    }
    #Tab{
        Breite: 420px;
        Rand: 20px automatisch;
        Position: relativ;
    }
    #tab ul li{
        Breite: 100px;
        Höhe: 30px;
        Rand: 1px durchgezogen #6699CC;
        schweben: links;
        Listenstil: keiner;
        Textausrichtung: zentriert;
        Zeilenhöhe: 30px;
    }
    #tab ul li:erstes-Kind{
        Rand rechts: keiner;
        /* Rahmenradius: 10px 0px 0px 0px; */
    }
    #tab ul li:last-child{
        Rand links: keiner;
        /* Rahmenradius: 0px 10px 0px 0px; */
    }
    #tab ul .active{
        Hintergrundfarbe: orange;
        Farbe: weiß;
    }
    #tab div{
        Breite: 415px;
        Position: absolut;
        oben: 32px;
        Anzeige: keine;
    }
    #tab div img{
        Breite: 350px;
        /* Rahmenradius:0px 0px 10px 10px; */
    }
    #tab div.aktuell{
        Anzeige: Block;
    }
 
</Stil>
<Text>
    <div id="Registerkarte">
            <ul>
                <li v-on:mouseover="ändern(index)" :class="[currentindex==index?'active':'']":key="item.id"v-for="(item,index) in Liste">{{item.text}}</li>
            </ul>
            <div :class="[currentindex==index?'current':'']" v-for="(Element,Index) in Liste">
                <img :key="item.id" v-bind:src="item.imgsrc"/>
            </div>
    </div>
    
    
</body>
<Skripttyp="text/javascript">
    var vm = neuer Vue({
        el:'#tab',
        Daten:{
            currentindex:'0', //Der Index der aktuellen Tab-Liste:[{
                Ich würde:'1',
                Text: 'Apfel',
                imgsrc:'imgs/1.jpg'
            },{
                ID: '2',
                Text: „orange“,
                imgsrc:'imgs/2.jpg'
            },{
                ID: '3',
                Text: 'Zitrone',
                imgsrc:'imgs/3.jpg'
            }]
            },
            Methoden:{
                ändern:Funktion(Index){
                dies.aktuellerIndex=Index;
                     }
            }
            });
</Skript>
</html>

Rendern

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Vue.js implementiert Tab-Umschaltung
Vue-Tab-Umschalt-Anmeldemethode, kleiner Fall
Vue.js-Komponenten implementieren Tabs und Umschalteffekte
Vue realisiert den Effekt von Tabs und Tab-Umschaltung
Vue.js-Tab realisiert Tab-Umschaltung
Verwenden dynamischer Komponenten zum Erzielen eines Tab-Umschalteffekts in Vue
Dynamische Vue-Komponente zum Erzielen eines Tab-Umschalteffekts
Die Vue.js-Komponentenregisterkarte implementiert das Wechseln zwischen Registerkarten
Vue.js-Komponentenregisterkarten, um einen Tab-Umschalteffekt zu erzielen
Vue implementiert Tab-Umschaltung

<<: Detaillierte Erläuterung, wie Sie Programme auf dem Alibaba Cloud Server bereitstellen und über Domänennamen direkt darauf zugreifen können

>>: MySQL Best Practices: Grundlegende Arten von Partitionstabellen