Vue implementiert einen einfachen Bildwechseleffekt

In diesem Artikelbeispiel wird der spezifische Code von Vue zur Realisierung eines einfachen Bildwechsels als Referenz geteilt. Der spezifische Inhalt ist wie folgt

Code:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Bildwechsel</title>
    <style type="text/css">
        *{
            Polsterung: 0;
            Rand: 0;
        }
        #app{
           Position: absolut;
           Breite: 100px;
           Höhe: 100px;
           oben: 100px;
           links: 400px;
        }

       #links{
           Position: relativ;
           oben: -240px;
           links: -45px;
           Schriftgröße: 50px;
       }

       #Rechts{
           Position: relativ;
           oben: -300px;
           links: 595px;
           Schriftgröße: 50px;
       }

       A{
           Farbe: Schwarz;
           Textdekoration: keine;
       }
    </Stil>
</Kopf>
<Text>
    <div id="app">
        <!-- Bild zur Umfrage-->
      <img :src="imgArr[index]"/>
      <!-- Pfeil nach links -->
      <a href="javascript:void(0)" id="left" @click="prev" v-show="index!=0">《</a>
      <!-- Pfeil nach rechts -->
      <a href="javascript:void(0)" id="rechts" @click="weiter" v-show="index<imgArr.length-1">》</a>
    </div>
    <Skript>
        var app = new Vue({
            el: "#app",
            Daten: {
                imgArr:[
                    "img/1.jpg",
                    "img/2.jpg",
                    "img/3.jpg",
                    "img/4.jpg",
                    "img/5.jpg",
                ],

                Index: 0,

            },
            Methoden: {
                vorherige: function(){
                    dies.index--;
                },
                weiter: Funktion(){
                    dies.index++;
                },
            }
        })
    </Skript>
</body>
</html>

Zusammenfassen:

Listendaten werden mithilfe eines Arrays gespeichert;
Die v-bind -Direktive kann Elementattribute wie src festlegen.
Sowohl v-show als auch v-if können den Anzeigestatus von Elementen umschalten, v-show wird jedoch für häufiges Umschalten empfohlen.

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 realisiert Bildwechseleffekt
Vue implementiert eine Umschaltfunktion zwischen base64-codierten Bildern
Detaillierte Erklärung zur Verwendung der Click-to-Switch-Bildkomponente im Vue-Kartenstil
Vue+js: Klicken Sie auf den Pfeil, um die Bilder zu wechseln
Vue implementiert Mouseover zum Wechseln der Bildquelle

<<: Ursachen und Lösungen für Verzögerungen bei der MySQL-Master-Slave-Synchronisierung

>>: Beispiel für die Implementierung eines Master-Slave-Hot-Standby mit Docker+keepalived+nginx