Vue implementiert Akkordeoneffekt
|
In diesem Artikelbeispiel wird der spezifische Code von Vue zur Erzielung des Akkordeoneffekts als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt Verwenden Sie Mauseingabe- und Mausausgabeereignisse, um Inhalte auszublenden Verwendete Wissenspunkte: 1.@mouseover Mausbewegungsereignis 2.@mouseout Maus-raus-Ereignis 3. v-if bedingtes Rendern
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<Titel></Titel>
<!-- Einfache Stileinstellungen-->
<style type="text/css">
* {
Rand: 0;
Polsterung: 0;
}
ul {
Listenstil: keiner;
}
.Titel{
Breite: 90px;
Höhe: 40px;
Zeilenhöhe: 40px;
Textausrichtung: zentriert;
Hintergrundfarbe: #AFAFAF;
}
.aktiv{
Hintergrundfarbe: #000000;
Farbe: weiß;
}
</Stil>
</Kopf>
<Text>
<div id="box">
<ul Klasse="ul">
<!-- Maus-Ein- und Aus-Ereignisse-->
<li @mouseover="num=1" @mouseout="num=0" class="title">Titel 1</li>
<!-- Bedingtes Rendern -->
<li v-if="num==1">h1h1h1h1</li>
<li v-if="num==1">h1h1h1h1</li>
<li v-if="num==1">h1h1h1h1</li>
<li v-if="num==1">h1h1h1h1</li>
</ul>
<ul Klasse="ul">
<li @mouseover="num=2" @mouseout="num=0" class="title">Titel 2</li>
<li v-if="num==2">h2h2h2h2</li>
<li v-if="num==2">h2h2h2h2</li>
<li v-if="num==2">h2h2h2h2</li>
<li v-if="num==2">h2h2h2h2</li>
</ul>
<ul>
<li @mouseover="num=3" @mouseout="num=0" class="title">Titel 3</li>
<li v-if="num==3">h3h3h3hh3</li>
<li v-if="num==3">h3h3h3hh3</li>
<li v-if="num==3">h3h3h3hh3</li>
<li v-if="num==3">h3h3h3hh3</li>
</ul>
</div>
</body>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<Skripttyp="text/javascript">
var vm = neuer Vue({
el: "#box",
Daten() {
zurückkehren {
Nummer: 0
}
}
})
</Skript>
</html>Ergebnis:
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:
|
<<: So verwenden Sie die Positionierung, um Elemente zu zentrieren (Tipps zum Webseiten-Layout)
>>: Beispielcode zum Testen einer Technologieanwendung basierend auf Docker+Selenium Grid
Artikel empfehlen
Beispiel für eine automatische Importmethode für allgemeine Vue3.0-Komponenten
1. Voraussetzungen Wir verwenden zum Importieren ...
Das Miniprogramm implementiert nativ das linksseitige Schubladenmenü
Inhaltsverzeichnis WXS-Antwortereignis Plan A Sei...
Detaillierte Schritte zur Installation von Nginx unter Linux
1. Nginx-Installationsschritte 1.1 Offizielle Web...
Detaillierte Erklärung der MySQL-Berechtigungssteuerung
Inhaltsverzeichnis MySQL-Berechtigungskontrolle B...
Tiefgreifendes Verständnis langer MySQL-Transaktionen
Vorwort: Dieser Artikel stellt hauptsächlich den ...
Detaillierte Schritte zur Installation der angegebenen Docker-Version (1.12.6) mit RPM
1. Gründe Wenn das System Centos7.3 ist, ist die ...
Detaillierte Schritte zur Neuinstallation von VMware Tools (grafisches Tutorial)
VMware Tools ist ein Tool, das mit virtuellen VMw...
Detaillierte Analyse und Prüfung von SSD-Leistungsproblemen in MySQL-Servern
【Frage】 Wir haben einen HP-Server. Wenn die SSD e...
Einführung in die Verwendung benutzerdefinierter Datenattribute in HTML- und Plug-In-Anwendungen
Sie werden oft HTML mit Datenattributen sehen. Die...
Beispielcode für Nginx zur Erreichung dynamischer und statischer Trennung
1. Einfache Konfiguration der dynamischen und sta...
3 häufige Fehler beim Lesen von MySQL Binlog-Protokollen
1. mysqlbinlog: [FEHLER] unbekannte Variable „def...
Eine kurze Analyse des Reaktionsprinzips und der Unterschiede von Vue2.0/3.0
Vorwort Seit der offiziellen Einführung von vue3....
Tutorial zur HTML-Tabellenauszeichnung (6): Farbattribut für dunkle Rahmen BORDERCOLORDARK
In einer Tabelle können Sie die Farbe des unteren...
Der Unterschied zwischen HTML-Block-Level-Tags und Inline-Tags
1. Blockebenenelement: bezieht sich auf die Fähigk...
Einige Funktionen der Verwendung von tcpdump zum Erfassen von Paketen in der Linux-Befehlszeile
tcpdump ist ein flexibles und leistungsstarkes To...