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
Installationstutorial für Docker unter Linux
Das Docker-Paket ist bereits im Standard-Reposito...
Detaillierte Erklärung der Linux-Befehle sort, uniq, tr tools
Sortierwerkzeug Der Linux-Befehl „sort“ wird zum ...
So konfigurieren Sie eine VMware-Umgebung mit mehreren Knoten
Dieses Tutorial verwendet CentOS 7 64-Bit. Weisen...
Detaillierte Erläuterung des Beispiels zum Einbetten von Videos in eine HTML-Seite und zum Umschalten von Videos mit JS-Steuerung
Zunächst lautet der HTML-Code zum Einbetten des Vi...
Vue verwendet den Rich-Text-Editor vue-quill-editor und lädt Bilder auf den Server hoch
Inhaltsverzeichnis 1. Vorbereitung 2. Definieren ...
Was ist DNS-Prefetch? Frontend-Optimierung: DNS-Vorauflösung verbessert die Seitengeschwindigkeit
Inhaltsverzeichnis Hintergrund 1. Was ist DNS-Pre...
RHEL7.5 MySQL 8.0.11 Installations-Tutorial
Dieser Artikel zeichnet das Installationstutorial...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.23
Dieser Artikel zeichnet das Installationstutorial...
Detaillierter Installationsprozess von MySQL5.6.40 unter CentOS7 64
MySQL5.6.40-Installationsprozess unter CentOS7 64...
Was sind MySQL-Dirty-Pages?
Inhaltsverzeichnis Schmutzige Seiten (Speichersei...
Vue implementiert Video-Upload-Funktion
In diesem Artikelbeispiel wird der spezifische Co...
Lösen Sie schnell das Problem des langsamen Tomcat-Starts, super einfach
Heute habe ich einem Klassenkameraden geholfen, e...
CSS entfernt den gepunkteten Rahmen, der beim Klicken auf einen Link entsteht. Kompatibel mit Browsern, die den W3C-Standards entsprechen
Teil des Codes: Code kopieren Der Code lautet wie...
Lösung für das Problem, dass bei der Installation von Centos7 mit VmWare kein Zugriff auf das Internet möglich ist
Was tun, wenn VmWare während der Installation von...
Einführung in den glibc-Upgradeprozess für Centos6.5
Inhaltsverzeichnis Szenarioanforderungen glibc-Ve...