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:
|
<<: Installieren Sie das Linux-System automatisch basierend auf Cobbler
>>: Erläuterung der Verwendungsszenarien von SQL und verschiedenen NoSQL-Datenbanken
Artikel empfehlen
Detaillierte Erläuterung der Überwachung der NVIDIA GPU-Nutzung unter Linux
Bei der Verwendung von TensorFlow für Deep Learni...
Beispielcode zum Erstellen von Desktop-Anwendungen mit Vue + Electron
1.vue-Verpackung Hier verwenden wir den Befehl „v...
Zusammenfassung praktischer Fähigkeiten, die häufig in Vue-Projekten verwendet werden
Inhaltsverzeichnis Vorwort 1. Verwenden Sie $attr...
Praxis der Implementierung der Benutzeranmeldung durch Front-End- und Back-End-Interaktion von Node.js
Inhaltsverzeichnis 1. Projektanforderungen Zweite...
Zusammenfassung der Bereitstellung des Tomcat-Clusters und des Nginx-Lastausgleichs basierend auf Docker
Inhaltsverzeichnis Vorne geschrieben 1. Ngixn-Bil...
Das Lazy-Loading-Attributmuster in JavaScript verstehen
Traditionell erstellen Entwickler Eigenschaften i...
So verwenden Sie eine Karte, um die domänenübergreifende Nutzung mehrerer Domänennamen in Nginx zu ermöglichen
Die übliche Nginx-Konfiguration ermöglicht domäne...
Analyse und Lösung der Gründe, warum HTML-externe Referenz-CSS-Dateien nicht effektiv sind
Als Frontend-Neuling habe ich einige Tage am Front...
Detaillierte Erläuterung der Deep Copy und Shallow Copy im JS-Variablenspeicher
Inhaltsverzeichnis Variabler Typ und Speicherplat...
Lösung für das Problem des Sitzungsverlusts bei Nginx
Bei der Verwendung von Nginx als Reverse-Proxy fü...
5 VueUse-Bibliotheken, die die Entwicklung beschleunigen können (Zusammenfassung)
Inhaltsverzeichnis Welche Dienstprogramme bietet ...
Die Frontend-Entwicklung muss jeden Tag lernen, HTML-Tags zu verstehen (1)
2.1 Semantisierung sorgt dafür, dass Ihre Webseit...
Tomcat verwendet Thread-Pool zur Verarbeitung gleichzeitiger Remote-Anfragen
Wenn wir verstehen, wie Tomcat gleichzeitige Anfr...
Ein einfaches Beispiel für die Verwendung von Vue3-Routing VueRouter4
Routenplanung vue-router4 behält den Großteil der...
js implementiert dynamisch Operationen zum Hinzufügen und Löschen von Tabellen
In diesem Artikelbeispiel wird der spezifische Co...