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

HTML-Codeanalyse der Textkonvertierungseffekte bei Links- und Rechtsbewegungen

Vue realisiert Bildwechseleffekt

Funktionale Anforderungen

Implementierungscode

Wirkung

HTML-Codeanalyse der Textkonvertierungseffekte bei Links- und Rechtsbewegungen

Einführung in die Verwendung des Select-Optgroup-Tags in HTML

Notieren Sie eine Falle bei der Aktualisierung der MySQL-Update-Anweisung

Eine kurze Erläuterung des Datums-/Uhrzeitformats beim Exportieren von Tabellendaten von MySQL nach Excel

Analyse der MySQL-Ansichtsfunktionen und Anwendungsbeispiele

Detaillierte Anwendungsfälle von MySql Escape

Wann verwendet man Tabellen und wann CSS (Erfahrungsaustausch)

Verwenden Sie JS zum Vergrößern und Verkleinern, wenn Sie die Maus auf das Bild bewegen

Mehrbenutzer-Lizenzierung für Remotedesktopverbindungen unter Windows Server 2008 R2

So lösen Sie das Problem FileZilla_Server:425. Datenverbindung kann nicht geöffnet werden

Artikel empfehlen

So generieren Sie Zufallszahlen mit angegebenen Ziffern in MySQL und so generieren Sie Zufallszahlen in Stapeln

React Router 5.1.0 verwendet useHistory, um die Seitensprungnavigation zu implementieren

Tipps zur Optimierung von MySQL SQL-Anweisungen

Lösen Sie das Problem, dass ifconfig und addr die IP-Adresse in Linux nicht sehen können

Detaillierter Prozess zur Verwendung von Vscode in Kombination mit Docker für die Entwicklung

HTML-Framework_Powernode Java Academy

JS realisiert Video-Sperreffekt

Das Vue-Projekt konfiguriert den Webpack-Obfuscator, um Codeverschlüsselung und -verschleierung zu implementieren.

Die Verwendung der Vue-Direktive v-bind und zu beachtende Punkte

Detaillierte Erklärung des VueRouter-Routings

JavaScript, um einen einheitlichen Animationseffekt zu erzielen

el-table in vue realisiert automatischen Deckeneffekt (unterstützt feste)

Sorgen Sie für eine schnelle Website

Sortierfunktion für HTML-Tabellen per Mausklick

Lebenszyklus und Ausführungsreihenfolge von React-Class-Komponenten