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:
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:
|
<<: 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
Artikel empfehlen
11 Beispiele für die erweiterte Verwendung von Eingabeelementen in Webformularen
1. Löschen Sie das gepunktete Feld, wenn die Scha...
Schritte zum Konfigurieren von IIS10 unter Win10 und zum Unterstützen des Debuggens von ASP-Programmen
Microsoft IIS IIS (Internet Information Server) i...
So verwenden Sie GeoIP, um Regionen in Nginx einzuschränken
Dieser Blog ist eine Arbeitsnotiz Umfeld: Nginx-V...
Vue implementiert Drag & Drop oder Klicken zum Hochladen von Bildern
In diesem Artikel wird der spezifische Code von V...
Einführung in den Swap-Speicher des Linux-Systems
Swap-Speicher ist heutzutage ein gängiger Aspekt ...
Installationsprozess von VMware vCenter 6.7 (grafisches Tutorial)
Hintergrund Ursprünglich wollte ich ein 6.7 Vcent...
Implementierungscode von Nginx Anti-Hotlink und Optimierung in Linux
Versionsnummer verbergen Die Versionsnummer wird ...
Lösung für den Mysql-FEHLER 1045 (28000): Zugriff verweigert für Benutzer root@localhost-Problem im Ubuntu-System
Erster Weg: skip-grant-tables: Sehr nützliche MyS...
Lösung für 404-Fehler beim Herunterladen einer APK-Datei vom IIS-Server
Bei der Verwendung von IIS als Server wurde die A...
So betreiben Sie eine MySql-Datenbank mit Gorm
1. Festlegen der Groß-/Kleinschreibung von Felder...
Implementierung einer Suchfeldfunktion mit Suchsymbol basierend auf HTML-CSS
Vorwort Ich möchte Ihnen zeigen, wie Sie ein Such...
Eine kurze Analyse der startReactApplication-Methode von React Native
In diesem Artikel haben wir den Startvorgang von ...
Der vollständige Leitfaden zum Rasterlayout in CSS
Grid ist ein zweidimensionales Rasterlayoutsystem...
Ein Artikel erklärt den Klassenlademechanismus von Tomcat
Inhaltsverzeichnis - Vorwort - - JVM-Klassenlader...
Detaillierte Erklärung zu anonymen Slots und benannten Slots in Vue
Inhaltsverzeichnis 1. Anonyme Slots 2. Benannte S...