Vue.js implementiert eine Bildwechselfunktion

In diesem Artikel wird der spezifische Code von Vue.js zur Implementierung der Bildwechselfunktion zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Die Funktionen sind wie folgt

Das Dateiverzeichnis lautet wie folgt. Um diese Funktion zu implementieren, müssen Sie nur den Speicherort des Bildes ändern.

Der Code lautet wie folgt

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8" />
  <Titel></Titel>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
 </Kopf>
 <style type="text/css">
  div {
   Rand: 0 automatisch;
   Breite: 200px;
   Höhe: 300px;
   Rand: 1px, durchgehendes Aquamarinblau;
  }
  img {
   Rand: 0 automatisch;
   Breite: 200px;
   Höhe: 250px;
   Rand: 1px, durchgehendes Aquamarinblau;
  }
  
 
 </Stil>
 <Text>
  <div id="app">
   <img :src="imgQuelle[index]" >
   <button type="button" @click="prephoto()">Vorheriges Foto</button>
   <button type="button" @click="nextphoto()">Nächstes Foto</button>
  </div>
  <Skripttyp="text/javascript">
   var app = new Vue({
    el:"#app",
    Daten:{
             imgSrc:["./img/1.jpg","./img/2.jpg"],
    Index: 1
    },
    Methoden:{
     prephoto:Funktion(){
      dies.index--;
      wenn(dieser.index===-1)
      {
       dies.index=diese.imgSrc.length-1;
      }
      konsole.log(dieser.index)
     },
     nächstesFoto:Funktion(){
      dies.index++;
      wenn(dieser.index===diese.imgSrc.length){
       dies.index=0;
      }
      konsole.log(dieser.index)
     }
    }
   })
  </Skript>
 </body>
</html>

Für Anfänger geeignet.

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 realisiert Bildwechseleffekt
Vue+js: Klicken Sie auf den Pfeil, um die Bilder zu wechseln
Detaillierte Erklärung zur Verwendung der Click-to-Switch-Bildkomponente im Vue-Kartenstil
Vue implementiert einen einfachen Bildwechseleffekt
Vue implementiert das Bild mit Schaltflächenwechsel
Vue verwendet den Swiper zum Wechseln von Bildern durch Wischen nach links und rechts
Vue implementiert eine Umschaltfunktion zwischen base64-codierten Bildern
Implementierungscode für den benutzerdefinierten JS-Bildfragment-Karussell-Umschalteffekt von Vue

<<: Installieren Sie das Linux-System automatisch basierend auf Cobbler

>>: Erläuterung der Verwendungsszenarien von SQL und verschiedenen NoSQL-Datenbanken