Vue implementiert die Anzeige und Ausblendung der dreistufigen Navigation

<Vorlage>
  <div id="app">
    <img alt="Vue-Logo" src="./assets/logo.png" />
    <HelloWorld msg="Willkommen bei Ihrer Vue.js-App" />
    <div Klasse="Erste" v-for="(Element, Schlüssel) in navLists" :Schlüssel="Schlüssel">
      <li>
        <span @click="handleClick(key)"> {{ item.title }}</span>
        <div
          v-for="(Element2, Schlüssel2) in Element.Kind"
          :Schlüssel="Schlüssel2"
          Klasse="zweite"
          v-show="show2 && currIndex == Schlüssel"
        >
          <p @click="zweiterKlick(Taste2)">{{ item2.Untertitel }}</p>
          <div
            v-for="(Element3, Schlüssel3) in Element2.dreiKind"
            :Schlüssel="Schlüssel3"
            Klasse="drei"
           v-show="show3 && aktuellerIndex2 == Schlüssel2"
          >
            {{ item3.threeTitle }}
          </div>
        </div>
      </li>
    </div>
  </div>
</Vorlage>
 
<Skript>
importiere HelloWorld aus "./components/HelloWorld.vue";
 
Standard exportieren {
  Name: "App",
  Komponenten:
    Hallo Welt,
  },
  Daten() {
    zurückkehren {
      ich: 0,
 
      show3: falsch,
      show2: falsch,
      Navigationslisten: [
        {
          Titel: "Projektinformationen",
          Kind: [
            {
              Untertitel: "Projektvorstellung",
              esubTitle: "#ProjektEinführung",
              dreiKind: [
                { threeTitle: "Drei-Ebenen-Navigation" },
                { threeTitle: "Drei-Ebenen-Navigation" },
                { threeTitle: "Drei-Ebenen-Navigation" },
              ],
            },
            {
              Untertitel: „Beispielinformationen“,
              dreiKind: [
                { threeTitle: "Dritte Ebene Navigation 22" },
                { threeTitle: "Dritte Ebene Navigation 22" },
                { threeTitle: "Dritte Ebene Navigation 22" },
              ],
            },
 
            {
              Untertitel: „Beispielinformationen“,
              dreiKind: [
                { threeTitle: "Dritte Ebene Navigation 33" },
                { threeTitle: "Dritte Ebene Navigation 33" },
                { threeTitle: "Dritte Ebene Navigation 33" },
              ],
            },
          ],
        },
        {
          Titel: "Projektinformationen 2",
          Kind: [
            {
              Untertitel: "Projekteinführung 22",
              dreiKind: [
                { threeTitle: "Drei-Ebenen-Navigation 44" },
                { threeTitle: "Level 3 Anleitung 44" },
                { threeTitle: "Dritte Ebene Navigation 22" },
              ],
            },
            {
              Untertitel: "Beispielinformationen 22",
            },
          ],
        },
        {
          Titel: "Projektinformation 3",
          eTitel: "#Projektnachricht",
          Kind: [
            {
              Untertitel: "Projekteinführung 33",
              esubTitle: "#ProjektEinführung",
            },
            {
              Untertitel: "Beispielinformationen 33",
              esubTitle: "#Beispielinformation",
            },
          ],
        },
        {
          Titel: "Projektinformationen 2",
          Kind: [
            {
              Untertitel: "Projekteinführung 22",
            },
            {
              Untertitel: "Beispielinformationen 22",
            },
          ],
        },
        {
          Titel: "Projektinformation 3",
          Kind: [
            {
              Untertitel: "Projekteinführung 33",
            },
            {
              Untertitel: "Beispielinformationen 33",
            },
          ],
        },
      ],
 
      currIndex: "", //Aktueller Index spanIndex: [], //Array indizieren arrIndex: "", //Wird verwendet, um zu bestimmen, ob der aktuelle Index durch Indizierung des Arrays gefunden werden soll. -1 bedeutet nicht gefunden, 0 bedeutet gefunden.
 
      currIndex2: "", //Aktueller Index der sekundären Navigation spanIndex2: [], //Array indexieren arrIndex2: "", //Wird verwendet, um zu bestimmen, ob der aktuelle Index durch Indizierung des Arrays gefunden werden soll. -1 bedeutet nicht gefunden, 0 bedeutet gefunden.
    };
  },
  Methoden: {
    handleKlick(index) {
      // Initialisieren Sie die Navigation der dritten Ebene, die standardmäßig nicht angezeigt wird.
      dies.show3 =false;
      dies.spanIndex2.splice(-1, 1);
 
      // Aktueller Index = Index
      dies.currIndex = Index;
      console.log("aktueller Index", Index);
      // Bestimmen Sie, ob der aktuelle Index im Index-Array spanIndex enthalten ist. Es gibt nur zwei mögliche Werte für arrIndex: -1 nicht gefunden. 0 gefunden.
      dies.arrIndex = dies.spanIndex.indexOf(index);
      Konsole.log("arrIndex", dieser.arrIndex);
 
      wenn (this.arrIndex == 0) {
        //arrIndex == 0, der Index wurde gefunden, lösche den Index im Index-Array spanIndex und verstecke die sekundäre Navigation.
        dies.spanIndex.splice(dies.arrIndex, 1);
        dies.show2 = falsch;
      } anders {
        // arrIndex ==-1, nicht gefunden, splice(-1,1) löscht 1 Wert vom Ende des spanIndex-Arrays und fügt den aktuellen Index zum Index-Array spanIndex hinzu, show2 ist wahr, zeigt die sekundäre Navigation an,
        dies.spanIndex.splice(dies.arrIndex, 1);
        dies.spanIndex.push(index);
        dies.show2 = wahr;
      }
      
      console.log("Index-Array", this.spanIndex);
    },
 
    zweiterKlick(index) {
      konsole.log(index);
      // Aktueller Index = Index
      dies.currIndex2 = Index;
      // Bestimmen Sie, ob der aktuelle Index im Index-Array spanIndex enthalten ist. Es gibt nur zwei mögliche Werte für arrIndex: -1 nicht gefunden. 0 gefunden.
      dies.arrIndex2 = dies.spanIndex2.indexOf(index);
      console.log("arrIndex2", this.arrIndex2);
 
      wenn (this.arrIndex2 == 0) {
        //arrIndex == 0, der Index wurde gefunden, lösche den Index im Index-Array spanIndex und verstecke die sekundäre Navigation.
        dies.spanIndex2.splice(dies.arrIndex2, 1);
        this.show3 = falsch;
      } anders {
        // arrIndex ==-1, nicht gefunden, splice(-1,1) löscht 1 Wert vom Ende des spanIndex-Arrays und fügt den aktuellen Index zum Index-Array spanIndex hinzu, show2 ist wahr, zeigt die sekundäre Navigation an,
        dies.spanIndex2.splice(dies.arrIndex2, 1);
        dies.spanIndex2.push(index);
        dies.show3 = wahr;
      }
       console.log("Index-Array 2", this.spanIndex2);
    },
  },
};
</Skript>
 
<Stil>
P {
  Polsterung: 5px 0;
  Randblock-Start: 0;
  Randblockende: 0;
}
#app {
  Schriftfamilie: Avenir, Helvetica, Arial, serifenlos;
  -webkit-font-smoothing: Kantenglättung;
  -moz-osx-font-smoothing: Graustufen;
  Textausrichtung: zentriert;
  Farbe: #2c3e50;
  Rand oben: 60px;
}
.Erste {
  Breite: 200px;
  Schriftgröße: 24px;
  Schriftstärke: fett;
  /* Höhe: 60px; */
  /* Hintergrund:rot; */
}
.erster:hover {
  Cursor: Zeiger;
 
  /* Farbe: rot; */
}
.zweite {
  Schriftgröße: 18px;
  Schriftstärke: normal;
  Hintergrund: #eee;
  Rand links: 50px;
}
.drei {
  Hintergrund: gelb;
  Rand links: 20px;
  Schriftgröße: 14px;
}
</Stil>