Vue realisiert Bildwechseleffekt

In diesem Artikelbeispiel wird der spezifische Code von Vue zur Erzielung des Bildwechseleffekts als Referenz geteilt. Der spezifische Inhalt ist wie folgt

1) v-wenn/v-zeigen

Beide können zum Ausblenden und Anzeigen von Elementen verwendet werden. Die Umsetzungsprinzipien sind jedoch unterschiedlich:
v-if erreicht den Effekt des Ausblendens und Anzeigens von Elementen durch Entfernen und Hinzufügen von Elementen aus dem DOM-Baum.
v-show erreicht den Effekt des Ausblendens und Anzeigens von Elementen durch Ändern des Verschiebungswerts des Elements.

2) V-Bindung

v-bind kann den Attributwert eines Elements ändern.
Lassen Sie uns basierend auf diesem Hintergrundwissen ein Beispiel für die Bildumschaltung implementieren.

Funktionale Anforderungen

1) Klicken Sie auf die Schaltfläche links, um das vorherige Bild anzuzeigen. Wenn das Bild das erste ist, verbergen Sie die Schaltfläche
2) Klicken Sie auf die Schaltfläche rechts, um das nächste Bild anzuzeigen. Wenn das Bild das letzte ist, verbergen Sie die Schaltfläche

Implementierungscode

<!DOCTYPE html>
<html>
    <Kopf>
        <meta charset="utf-8" />
        <title>Bildwechseleffekt</title>
        <Stil>
            #prüfen{
                Position: absolut;
            }
            #links{
                Position: absolut;
                oben: 134px;
                Z-Index: 99;
                Breite: 24px;
                Höhe: 32px;
                Hintergrundfarbe: schwarz;
                Farbe: weiß;
                Schriftgröße: 24px;
                Deckkraft: 0,6;
                Cursor: Zeiger;
            }
            #Rechts{
                Position: absolut;
                rechts: 0;
                oben: 134px;
                Z-Index: 99;
                Breite: 24px;
                Höhe: 32px;
                Hintergrundfarbe: schwarz;
                Farbe: weiß;
                Schriftgröße: 24px;
                Deckkraft: 0,6;
                Cursor: Zeiger;
            }
            img{
                Breite: 500px;
                Höhe: 300px;
                
            }
            
        </Stil>
    </Kopf>
    <Text>
        <div id="test" >
            <div id="left" @click = "changeleft" v-if="lefttt"> &lt; </div>
            <img v-bind:src = "'imgs/00'+num+'.jpg'"/><br>
            <div id="right" @click = "changeright" v-show="righttt"> &gt; </div>
           

        </div>
    </body>
    <!-- Entwicklungsversion, einschließlich hilfreicher Befehlszeilenwarnungen -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <Skripttyp="text/javascript">
         
         var dated = neues Vue({
             //Einhängepunkt el: "#test",
             //Daten: {
                Zahl: 1,
                linkstt:false,
                richtig:wahr,
             },
             Methoden: {
                 changeleft : Funktion (){
                    wenn(diese.zahl <= 2){
                        dies.lefttt=false;
                        diese.num = 1;
                    }anders{
                        dies.lefttt=true;
                        diese.nummer--;
                    }
                    
                    dies.righttt=true;
                 },
                 Änderungsrecht: Funktion (){
                    wenn(diese.zahl >= 7){
                        dies.righttt=false;
                        diese.num = 8;
                    }anders{
                        dies.righttt=true;
                        diese.num++;
                    }
                    
                    dies.lefttt=true;
                    
                 }
             }
         });
    
    </Skript>
</html>

Wirkung

1) Bei der Anzeige des ersten Bildes

2) Bei der Anzeige des letzten Bildes

3) Bei der Anzeige anderer Bilder

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:

So implementieren Sie den Vue-Mausrad-Scrolling-Umschalt-Routing-Effekt
Vue implementiert das Scrollen mit dem Mausrad zum Wechseln der Seiten
Vue verwendet den Swiper zum Wechseln von Bildern durch Wischen nach links und rechts
Vue implementiert das Bild mit Schaltflächenwechsel
Implementierungscode für den benutzerdefinierten JS-Bildfragment-Karussell-Umschalteffekt von Vue
Vue implementiert eine Umschaltfunktion zwischen base64-codierten Bildern
Detaillierte Erklärung zur Verwendung der Click-to-Switch-Bildkomponente im Vue-Kartenstil
Vue implementiert einen einfachen Bildwechseleffekt
Vue+js: Klicken Sie auf den Pfeil, um die Bilder zu wechseln
Vue implementiert Mouseover zum Wechseln der Bildquelle

<<: MySQL-Gruppierungsmethode für die Gruppierungssequenz einzelner Wörter und die Gruppierung mehrerer Felder

>>: Detaillierte Erläuterung der Idee der xshell-Remote-Anmeldung bei CentOS7 ohne Kennwortanmeldung

Der Unterschied zwischen ${param} und #{param} in MySQL

Vue realisiert Bildwechseleffekt

Funktionale Anforderungen

Implementierungscode

Wirkung

Der Unterschied zwischen ${param} und #{param} in MySQL

HTML+CSS+JavaScript zum Erreichen eines Beispielcodes für das Scrollen in einer Listenschleife

So ändern Sie Farben und Designs in Vim unter Linux

Vuex implementiert einen einfachen Einkaufswagen

Der Prozess zum Erstellen eines Jenkins-Projekts unter Linux (am Beispiel von CentOS 7)

Zusammenfassung der englischen Namen chinesischer Schriftarten

Reines CSS zum Erreichen der Funktion „Klicken zum Erweitern und Lesen des Volltexts“

Zusammenfassung gängiger Befehle für Ubuntu-Server

Verwendungsanweisungen für den Befehl „Docker Create“

Docker-Port-Mapping und externe Unzugänglichkeitsprobleme

Artikel empfehlen

Webseitenerstellung für Anfänger: Lernen Sie den Umgang mit dem A-Tag für HTML-Hyperlinks

Häufig verwendete HTML-Meta-Tag-Attribute (erforderlich für Website-Kompatibilität und -Optimierung)

So implementieren Sie das parallele Herunterladen großer Dateien in JavaScript

Verwendung von „Select“, „Distinct“ und „Limit“ in MySQL

Installation, Aktivierung und Konfiguration von ModSecurity unter Apache

Zusammenfassung gängiger Befehle zum Erstellen von ZooKeeper3.4-Middleware unter CentOS7

Lösung für die MySQL-Installationsaufforderung „Geben Sie für weitere Hilfe bitte NET HELPMSG 3534 ein“

So berechnen Sie mit Linux den von zeitgesteuerten Dateien belegten Speicherplatz

Verwenden Sie das Firebug-Tool, um die Seite auf dem iPad zu debuggen

Verwenden Sie Javascript, um ein Sliding-Nav-Navigations-Plugin mit Gleitbalkeneffekt zu entwickeln

jQuery implementiert ein atmendes Karussell

Designreferenz Schönes und originelles Blog-Design

Analyse des Verwendungsbeispiels für den Common Table Expression CTE in mysql8

So aktualisieren Sie CentOS7 auf CentOS8 (detaillierte Schritte)

Praktische Hinweise zur Installation von Jenkins mit Docker-Compose