Vue implementiert Akkordeoneffekt

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:
  • Vue implementiert den Akkordeoneffekt der seitlichen Menüleiste Beispielcode
  • Entwicklungsbeispiel für eine Akkordeonmenükomponente in Vue.js

<<:  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

So installieren Sie MySQL 5.7 manuell auf CentOS 7.4

MySQL-Datenbanken werden häufig verwendet, insbes...

Lösung für Tomcat zum externen Speichern von Konfigurationsdateien

Frage Wenn wir bei der normalen Entwicklung das P...

Fassen Sie einige allgemeine Prinzipien des Webdesigns und der Webproduktion zusammen

<br />Verwandte Artikel: 9 praktische Vorsch...

Native js implementiert Warenkorb-Logik und -Funktionen

In diesem Artikelbeispiel wird der spezifische Co...

Entwerfen Sie einen Datensammler mit Vue

Inhaltsverzeichnis Szenario Kernthemen Statusüber...

Wenn Nginx eingeschaltet ist, ist der Port belegt und es erscheint die Meldung: Adresse bereits in Verwendung

Wie in der Abbildung gezeigt: Portnutzung prüfen:...

Vergleich der Leistung von int, char und varchar in MySQL

Im Internet kursieren viele scheinbar wahre „Gerü...

Detaillierte Erläuterung des Produktionsprinzips des jQuery-Atemkarussells

In diesem Artikel wird der spezifische Prozess de...

Einführung von Symbolen durch Implementierung benutzerdefinierter Komponenten auf Basis von Vue

Vorwort Bei der Projektentwicklung gibt es viele ...

Reines CSS, um einen bewölkten Wettersymboleffekt zu erzielen

Wirkung Die Wirkung ist wie folgt ​ Umsetzungside...

Die endgültige Lösung für Chromes Mindestschriftgrößenbeschränkung von 12px

Ich glaube, dass viele Benutzer, die Websites ers...

Zusammenfassung häufig verwendeter SQL-Anweisungen zum Erstellen von MySQL-Tabellen

Ich habe kürzlich an einem Projekt gearbeitet und...

jQuery simuliert einen Picker, um einen gleitenden Auswahleffekt zu erzielen

In diesem Artikel wird der spezifische Code von j...

Analyse von MySQL-Beispielen für doppelte und redundante Indizes

In diesem Artikel werden MySQL-Duplikatsindizes u...

Vue implementiert eine kleine Notizblockfunktion

In diesem Artikelbeispiel wird der spezifische Co...