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
Eine kurze Diskussion über die Optimierung von MySQL-Paging für Milliarden von Daten
Inhaltsverzeichnis Hintergrund analysieren Datens...
Was ist SSH? Wie benutzt man? Was sind die Missverständnisse?
Inhaltsverzeichnis Vorwort Was ist SSH? Wofür wir...
Codebeispiel für die Linux-SSH-Serverkonfiguration
Verwenden Sie den folgenden Terminalbefehl, um de...
So mounten Sie eine Festplatte in Linux und richten sie so ein, dass sie beim Booten automatisch gemountet wird
Da jedermanns Zeit kostbar ist, werde ich die Pro...
Eine kurze Diskussion über den Aufbau und den Betriebsmechanismus des Echtzeit-Computerframeworks Flink Cluster
Inhaltsverzeichnis 1. Flink-Übersicht 1.1 Grundle...
So löschen Sie zusätzliche Kernel in Ubuntu
Schritt 1: Den aktuellen Kernel anzeigen rew $ un...
Bringen Sie Ihnen bei, wie Sie die Zeigerposition in Javascript erhalten
Die Methode zum Abrufen der Zeigerposition in Jav...
3 Codes zur automatischen Aktualisierung von Webseiten
Tatsächlich ist es sehr einfach, diesen Effekt zu ...
So verwenden Sie CSS, um je nach Unterelementen unterschiedliche Stile zu schreiben
Der Effekt, den wir erreichen müssen: Was wird be...
Praxis der Linux-Datei- und Benutzerverwaltung
1. Zeigen Sie die Dateien oder Verzeichnisse im V...
Tutorial zur Implementierung von Tabellenladebaumdaten in der Vue-Komponentenbibliothek ElementUI
ElementUI implementiert ein Tutorial zum Laden vo...
Eine Aufzeichnung der Fallstricke des Lebenszyklus von WeChat-Applet-Komponenten
Der Komponentenlebenszyklus ist normalerweise der...
CSS-Float-Eigenschaftsdiagramm, Details der Float-Eigenschaft
Die korrekte Verwendung der CSS-Float-Eigenschaft...
Der Unterschied und die Verwendung von distinct und row_number() over() in SQL
1 Einleitung Wenn wir SQL-Anweisungen schreiben, ...
Verwenden von Zabbix zum Überwachen des Ogg-Prozesses (Windows-Plattform)
Dieser Artikel stellt vor, wie man das Ogg-Progra...