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
So verhindern Sie, dass die Bildlaufleiste die Seitenbreite beeinflusst, wenn die Bildlaufleiste auf der Seite angezeigt wird
Stellen Sie die Breite des Textkörpers auf die Bre...
Beispielanalyse für die Farbabstimmung einer Webseite: Analyse der Webseite mit grüner Farbabstimmung
<br />Grün liegt zwischen Gelb und Blau (kal...
Spezifikationen für Hyperlink-Symbole: Verbessern Sie die Lesbarkeit von Artikeln
1. Was ist die Hyperlink-Symbol-Spezifikation ?&l...
React führt antd-mobile+postcss ein, um ein mobiles Terminal zu erstellen
Installieren Sie antd-mobile Globaler Import npm ...
Holen Sie sich den berechneten Stil im CSS-Element (nach dem kaskadierenden/finalen Stil).
Um den berechneten Stil in einem CSS-Element zu er...
Gründe, warum MySQL-Abfragen langsam sind
Inhaltsverzeichnis 1. Wo ist die Langsamkeit? 2. ...
Tipps zur Verwendung von DIV-Containern mit fester Höhe in IE6 und IE7
Es gibt viele Unterschiede zwischen IE6 und IE7 in...
Das Konzept und die Eigenschaften von benutzerdefinierten MySQL-Variablen
Ein MySQL Custom Value ist ein temporärer Contain...
MySQL 8.0 kann jetzt JSON verarbeiten
Inhaltsverzeichnis 1. Kurzübersicht 2. JSON-Grund...
JavaScript Canvas zeichnet dynamische Drahtgittereffekte
In diesem Artikel wird der spezifische Code des d...
Gemessenes Bild - HTTP-Anforderung
Bitte öffnen Sie die Testseite in einem gängigen ...
Lassen Sie Ihren Text mit dem Marquee-Attribut in HTML tanzen
Syntax: <marquee> …</marquee> Mithilfe...
Detaillierte Erklärung zur Ausführung von Skripten oder Anweisungen durch Zabbix auf Remote-Hosts
Szenarioanforderungen 1. Wir können die Skriptfun...
So implementieren Sie ein Dropdown-Menü für die HTML-Eingabe
Code kopieren Der Code lautet wie folgt: <html...
Detaillierte Erklärung zur Verwendung der Vue h-Funktion
Inhaltsverzeichnis 1. Verstehen 2. Verwendung 1. ...