Vue realisiert Bildwechseleffekt
|
In diesem Artikelbeispiel wird der spezifische Code von Vue zur Erzielung des Bildwechseleffekts als Referenz geteilt. Der spezifische Inhalt ist wie folgt 1) v-wenn/v-zeigen Beide können zum Ausblenden und Anzeigen von Elementen verwendet werden. Die Umsetzungsprinzipien sind jedoch unterschiedlich: 2) V-Bindung v-bind kann den Attributwert eines Elements ändern. Funktionale Anforderungen 1) Klicken Sie auf die Schaltfläche links, um das vorherige Bild anzuzeigen. Wenn das Bild das erste ist, verbergen Sie die Schaltfläche
Implementierungscode
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8" />
<title>Bildwechseleffekt</title>
<Stil>
#prüfen{
Position: absolut;
}
#links{
Position: absolut;
oben: 134px;
Z-Index: 99;
Breite: 24px;
Höhe: 32px;
Hintergrundfarbe: schwarz;
Farbe: weiß;
Schriftgröße: 24px;
Deckkraft: 0,6;
Cursor: Zeiger;
}
#Rechts{
Position: absolut;
rechts: 0;
oben: 134px;
Z-Index: 99;
Breite: 24px;
Höhe: 32px;
Hintergrundfarbe: schwarz;
Farbe: weiß;
Schriftgröße: 24px;
Deckkraft: 0,6;
Cursor: Zeiger;
}
img{
Breite: 500px;
Höhe: 300px;
}
</Stil>
</Kopf>
<Text>
<div id="test" >
<div id="left" @click = "changeleft" v-if="lefttt"> < </div>
<img v-bind:src = "'imgs/00'+num+'.jpg'"/><br>
<div id="right" @click = "changeright" v-show="righttt"> > </div>
</div>
</body>
<!-- Entwicklungsversion, einschließlich hilfreicher Befehlszeilenwarnungen -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<Skripttyp="text/javascript">
var dated = neues Vue({
//Einhängepunkt el: "#test",
//Daten: {
Zahl: 1,
linkstt:false,
richtig:wahr,
},
Methoden: {
changeleft : Funktion (){
wenn(diese.zahl <= 2){
dies.lefttt=false;
diese.num = 1;
}anders{
dies.lefttt=true;
diese.nummer--;
}
dies.righttt=true;
},
Änderungsrecht: Funktion (){
wenn(diese.zahl >= 7){
dies.righttt=false;
diese.num = 8;
}anders{
dies.righttt=true;
diese.num++;
}
dies.lefttt=true;
}
}
});
</Skript>
</html>Wirkung1) Bei der Anzeige des ersten Bildes
2) Bei der Anzeige des letzten Bildes
3) Bei der Anzeige anderer Bilder
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:
|
>>: Detaillierte Erläuterung der Idee der xshell-Remote-Anmeldung bei CentOS7 ohne Kennwortanmeldung
Artikel empfehlen
Detailliertes Tutorial zur Konfigurationsmethode der kostenlosen Installationsversion von Mysql 5.7.19 (64-Bit)
Laden Sie mysql-5.7.19-winx64 von der offiziellen...
So deaktivieren Sie die automatische Eingabeaufforderung zum Speichern des Kennworts im Chrome-Browser
Hinweis: Bei der Webentwicklung werden IE und FF n...
So migrieren Sie den MySQL-Speicherort auf eine neue Festplatte
1. Bereiten Sie eine neue Festplatte vor und form...
Reflexion und Proxy in Front-End-JavaScript
Inhaltsverzeichnis 1. Was ist Reflexion? 2. Refle...
JavaScript realisiert den Effekt der mobilen Modalbox
In diesem Artikelbeispiel wird der spezifische Ja...
Verwendung von Vue-Filtern und benutzerdefinierten Anweisungen
Inhaltsverzeichnis Filter 01.Was ist 02. Wie es g...
Analyse und Anwendung des Wasserfallflussprinzips unregelmäßiger Bilder
Das im Projekt aufgetretene Layoutproblem unregel...
JavaScript Canvas implementiert Grafiken und Text mit Schatten
Verwenden Sie Canvas, um Grafiken und Text mit Sc...
Docker- und Portainer-Konfigurationsmethoden unter Linux
1. Installieren und verwenden Sie Docer CE Dieser...
Datenbankabfrageoptimierung: Unterabfrageoptimierung
1. Fall Nehmen Sie alle Mitarbeiter, die nicht Fi...
So ändern Sie das MySQL-Tabellenpartitionierungsprogramm
So ändern Sie das MySQL-Tabellenpartitionierungsp...
Detaillierte Erklärung von BOM und DOM in JavaScript
Inhaltsverzeichnis BOM (Browserobjektmodell) 1. F...
Die chinesischen verstümmelten Zeichen in HTML-Dateien und die Anzeigeprobleme in Browsern
Meine Seite hatte heute auch verstümmelte Zeichen...
Kapselungsimplementierung des von nestjs an das Front-End zurückgegebenen Datenformats
Im Allgemeinen wird während des Entwicklungsproze...
Beispielanalyse von Linux-Dateiverwaltungsbefehlen [Berechtigungen, Erstellen, Löschen, Kopieren, Verschieben, Suchen usw.]
Dieser Artikel beschreibt die Linux-Dateiverwaltu...