Vueは3段階のナビゲーション表示と非表示を実装します

<テンプレート>
  <div id="アプリ">
    <img alt="Vue ロゴ" src="./assets/logo.png" />
    <HelloWorld msg="Vue.js アプリへようこそ" />
    <div class="first" v-for="(item, key) in navLists" :key="key">
      <li>
        <span @click="handleClick(キー)"> {{ item.title }}</span>
        <div
          v-for="(item2, key2) in item.child"
          :key="キー2"
          クラス="second"
          v-show="show2 && currIndex == キー"
        >
          <p @click="secondClick(key2)">{{ item2.subTitle }}</p>
          <div
            v-for="(item3, key3) in item2.threeChild"
            :key="キー3"
            クラス="3"
           v-show="show3 && currIndex2 == key2"
          >
            {{ item3.threeTitle }}
          </div>
        </div>
      </li>
    </div>
  </div>
</テンプレート>
 
<スクリプト>
「./components/HelloWorld.vue」からHelloWorldをインポートします。
 
エクスポートデフォルト{
  名前:「アプリ」、
  コンポーネント:
    こんにちは世界、
  },
  データ（） {
    戻る {
      私: 0,
 
      表示3: 偽、
      表示2: 偽、
      navリスト: [
        {
          タイトル:「プロジェクト情報」、
          子供： [
            {
              サブタイトル:「プロジェクト紹介」
              サブタイトル: "#プロジェクト紹介",
              3人の子供: [
                { threeTitle: "3 レベルのナビゲーション" },
                { threeTitle: "3 レベルのナビゲーション" },
                { threeTitle: "3 レベルのナビゲーション" },
              ]、
            },
            {
              サブタイトル:「サンプル情報」、
              3人の子供: [
                { threeTitle: "3階層ナビゲーション22" },
                { threeTitle: "3階層ナビゲーション22" },
                { threeTitle: "3階層ナビゲーション22" },
              ]、
            },
 
            {
              サブタイトル:「サンプル情報」、
              3人の子供: [
                { threeTitle: "第 3 レベルのナビゲーション 33" },
                { threeTitle: "第 3 レベルのナビゲーション 33" },
                { threeTitle: "第 3 レベルのナビゲーション 33" },
              ]、
            },
          ]、
        },
        {
          タイトル:「プロジェクト情報2」
          子供： [
            {
              サブタイトル:「プロジェクト紹介22」
              3人の子供: [
                { threeTitle: "3 レベルナビゲーション 44" },
                { threeTitle: "レベル 3 ガイド 44" },
                { threeTitle: "第3レベルナビゲーション22" },
              ]、
            },
            {
              サブタイトル:「サンプル情報22」
            },
          ]、
        },
        {
          タイトル:「プロジェクト情報3」
          eタイトル: "#プロジェクトメッセージ",
          子供：
            {
              サブタイトル:「プロジェクト紹介33」
              サブタイトル: "#プロジェクト紹介",
            },
            {
              サブタイトル:「サンプル情報33」
              サブタイトル: "#sampleInformation",
            },
          ]、
        },
        {
          タイトル:「プロジェクト情報2」
          子供： [
            {
              サブタイトル:「プロジェクト紹介22」
            },
            {
              サブタイトル:「サンプル情報22」
            },
          ]、
        },
        {
          タイトル:「プロジェクト情報3」
          子供： [
            {
              サブタイトル:「プロジェクト紹介33」
            },
            {
              サブタイトル:「サンプル情報33」
            },
          ]、
        },
      ]、
 
      currIndex: "", //現在のインデックス spanIndex: [], //インデックス配列 arrIndex: "", //配列にインデックスを付けて現在のインデックスを見つけるかどうかを決定するために使用されます。 -1 は見つからなかったことを意味し、0 は見つかったことを意味します。
 
      currIndex2: "", //セカンダリナビゲーションの現在のインデックス spanIndex2: [], //インデックス配列 arrIndex2: "", //配列をインデックス付けして現在のインデックスを見つけるかどうかを決定するために使用されます。 -1 は見つからなかったことを意味し、0 は見つかったことを意味します。
    };
  },
  メソッド: {
    ハンドルクリック(インデックス) {
      // デフォルトでは表示されない第 3 レベルのナビゲーションを初期化します。
      this.show3 = false;
      this.spanIndex2.splice(-1, 1);
 
      // 現在のインデックス = インデックス
      this.currIndex = インデックス;
      console.log("現在のインデックス", index);
      // 現在のインデックスがインデックス配列 spanIndex 内にあるかどうかを判断します。 arrIndex に指定できる値は 2 つだけです: -1 が見つかりません。 0件見つかりました。
      this.arrIndex = this.spanIndex.indexOf(インデックス);
      console.log("arrIndex", this.arrIndex);
 
      (this.arrIndex == 0)の場合{
        //arrIndex == 0 の場合、インデックスが見つかり、インデックス配列 spanIndex 内のインデックスが削除され、セカンダリ ナビゲーションが非表示になります。
        this.spanIndex.splice(this.arrIndex、1);
        this.show2 = false;
      } それ以外 {
        // arrIndex ==-1、見つからない、splice(-1,1) は spanIndex 配列の末尾から 1 つの値を削除し、現在のインデックスをインデックス配列 spanIndex に追加します。show2 は true で、セカンダリ ナビゲーションを表示します。
        this.spanIndex.splice(this.arrIndex、1);
        this.spanIndex.push(インデックス);
        this.show2 = true;
      }
      
      console.log("インデックス配列", this.spanIndex);
    },
 
    secondClick(インデックス) {
      コンソールログ(インデックス);
      // 現在のインデックス = インデックス
      this.currIndex2 = インデックス;
      // 現在のインデックスがインデックス配列 spanIndex 内にあるかどうかを判断します。 arrIndex に指定できる値は 2 つだけです: -1 が見つかりません。 0件見つかりました。
      this.arrIndex2 = this.spanIndex2.indexOf(インデックス);
      console.log("arrIndex2", this.arrIndex2);
 
      (this.arrIndex2 == 0)の場合{
        //arrIndex == 0 の場合、インデックスが見つかり、インデックス配列 spanIndex 内のインデックスが削除され、セカンダリ ナビゲーションが非表示になります。
        this.spanIndex2.splice(this.arrIndex2、1);
        this.show3 = false;
      } それ以外 {
        // arrIndex ==-1、見つからない、splice(-1,1) は spanIndex 配列の末尾から 1 つの値を削除し、現在のインデックスをインデックス配列 spanIndex に追加します。show2 は true で、セカンダリ ナビゲーションを表示します。
        this.spanIndex2.splice(this.arrIndex2、1);
        this.spanIndex2.push(インデックス);
        this.show3 = true;
      }
       console.log("インデックス配列2", this.spanIndex2);
    },
  },
};
</スクリプト>
 
<スタイル>
ｐ {
  パディング: 5px 0;
  マージンブロック開始: 0;
  マージンブロック終了: 0;
}
＃アプリ {
  フォントファミリー: Avenir、Helvetica、Arial、sans-serif;
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
  テキスト配置: 中央;
  色: #2c3e50;
  上マージン: 60px;
}
。初め {
  幅: 200ピクセル;
  フォントサイズ: 24px;
  フォントの太さ: 太字;
  /* 高さ: 60px; */
  /* 背景:赤; */
}
.first:hover {
  カーソル: ポインタ;
 
  /* 色:赤; */
}
。2番 {
  フォントサイズ: 18px;
  フォントの太さ: 標準;
  背景: #eee;
  左マージン: 50px;
}
。三つ {
  背景: 黄色;
  左マージン: 20px;
  フォントサイズ: 14px;
}
</スタイル>