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
Analysieren Sie die Prinzipien der Tomcat-Architektur für den Architekturentwurf
Inhaltsverzeichnis 1. Lernziele 1.1. Beherrschen ...
Ein Beispiel für das elegante Schreiben von Urteilen in JavaScript
Inhaltsverzeichnis Vorwort 1. Monadisches Urteil ...
Zusammenfassung zum Erlernen von Docker-Befehlen in einem Artikel
Inhaltsverzeichnis Einführung Spiegel-Repository ...
Installieren Sie Windows Server 2019 auf VMware Workstation (Grafisches Tutorial)
Wenn Sie aufgefordert werden, einen Schlüssel ein...
10 Tipps zum Entwerfen nützlicher, benutzerfreundlicher Webanwendungen
Hier sind 10 Tipps zum Entwerfen benutzerfreundli...
Einführung in die Verwendung der vier wichtigsten SQL-Rankingfunktionen ROW_NUMBER, RANK, DENSE_RANK, NTILE
1. ROW_NUMBER() Definition: Die Funktion ROW_NUMB...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17 winx64
Windows-Installation mysql-5.7.17-winx64.zip Meth...
JavaScript-Grundlagen: Geltungsbereich
Inhaltsverzeichnis Umfang Globaler Umfang Funktio...
onfocus="this.blur()" wird von blinden Webmastern gehasst
Als er über die Seite zur Bedienung der Bildschir...
Detaillierte Erklärung des Update-Befehls für Software (Bibliothek) unter Linux
Beim Installieren von Paketen auf einem Ubuntu-Se...
SQL-Implementierung von LeetCode (183. Kunden, die noch nie eine Bestellung aufgegeben haben)
[LeetCode] 183.Kunden, die nie bestellen Angenomm...
Erste Schritte mit MySQL Sharding
Vorwort Relationale Datenbanken werden eher zu Sy...
Beispiele für die Verwendung von „Provide“ und „Inject“ in Vue2.0/3.0
Inhaltsverzeichnis 1. Was ist der Nutzen von Prov...
Vue implementiert dreidimensionales Säulendiagramm basierend auf E-Charts
Das dreidimensionale Säulendiagramm besteht aus d...
So schreiben Sie speichereffiziente Anwendungen mit Node.js
Inhaltsverzeichnis Vorwort Problem: Kopieren groß...