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
Erste Schritte Tutorial für Anfänger: Domänennamenauflösung und Bindung
Wie können Sie also nach der Registrierung eines ...
MySQL erhält das aktuelle Datum und die aktuelle Uhrzeit Funktionsbeispiel detaillierte Erläuterung
Holen Sie sich das aktuelle Datum + die aktuelle ...
So ändern Sie das Kennwort von MySQL 5.1 und melden sich remote bei der MySQL-Datenbank an
Erstellen Sie einen MySQL-Benutzer und autorisier...
So fixieren Sie die vier Seiten der Tabelle zum Scrollen nach oben, unten, links und rechts
Frage: Als ich kürzlich an Projektstatistiken arb...
Detaillierte Erklärung zur Verwendung von Docker-Compose-Befehlen
Sie können Docker-Container auf verschiedene Arte...
Das WeChat-Applet implementiert einen Videoplayer, der einen Bullet-Screen sendet
In diesem Artikel wird der spezifische Code für d...
Vue implementiert dynamische Routingdetails
Inhaltsverzeichnis 1. Frontend-Steuerung 1. In de...
MySQL-Installationsinformationen unter Linux-Server anzeigen
Sehen Sie sich die Installationsinformationen von...
So leiten Sie eine PC-Adresse in Vue an eine Mobiladresse um
Anforderungen: Die PC-Seite und die mobile Seite ...
Schritte für den Exit-Fehlercode des Docker-Containers
Manchmal werden einige Docker-Container nach eine...
Detaillierte Analyse, warum MySQL die Verwendung von UUID oder Snowflake-ID als Primärschlüssel nicht empfiehlt
Vorwort: Beim Entwerfen einer Tabelle in MySQL em...
Detaillierte Installation und Konfiguration von MySql auf dem Mac
1. Herunterladen und installieren Laden Sie die D...
Detaillierte Erläuterung der MySQL-Sicherungs- und Wiederherstellungspraxis von mysqlbackup
1. Einführung in mysqlbackup mysqlbackup ist die ...
Grundlegende Konzepte und allgemeine Methoden des Map-Mappings in ECMAScript6
Inhaltsverzeichnis Was ist eine Zuordnung? Unters...
Lernen Sie schnell die MySQL-Grundlagen
Inhaltsverzeichnis SQL verstehen SELECT verstehen...