Vueコード答え・解説

雛形コードを元に Vue.js を用いて実装していきましょう。

1. メニューの中身を v-show で管理する。

#1-1. 変数を用意する。

app.js

new Vue({
  el: '#app',
  data: {
    isShow: false, // 追加
  },
});

#1-2. メニューの中身とマスクに v-show を記載する。

index.html

<!-- v-showディレクティブを記載する -->
<!-- isShowがtrueの時のみ描画する -->
<div v-show="isShow" class="nav__inner">
  <div class="nav__icon nav__icon--times">
    <i class="fas fa-times fa-3x"></i>
  </div>
  <ul class="nav__menu">
    <li class="nav__item">
      <a class="nav__link" href="#">メニュー1</a>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">メニュー2</a>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">メニュー3</a>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">メニュー4</a>
    </li>
  </ul>
</div>
<!-- v-showディレクティブを記載する -->
<div v-show="isShow" class="nav__bg"></div>

2. メニューを v-on:click で表示できるようにする。

#2-1. 関数を用意する。

app.js

new Vue({
  el: '#app',
  data: {
    isShow: false,
  },
  methods: {
    showNav() {
      this.isShow = true; // 追加
    },
  },
});

#2-2. ハンバーガーアイコンに v-on:click を記載する。

index.html

<nav class="nav">
  <!-- v-onディレクティブを記載する -->
  <!-- クリックされた時showNavが実行される -->
  <div class="nav__icon" @click="showNav">
    <i class="fas fa-bars fa-3x"></i>
  </div>
  <div v-show="nav.isShow" class="nav__inner">
    <!-- 省略: メニューの中身 -->
  </div>
  <div v-show="nav.isShow" class="nav__bg"></div>
</nav>

#2-3. メニューを表示した時にハンバーガーアイコンを非表示にする。

index.html

<nav class="nav">
  <!-- v-showディレクティブを記載する -->
  <!-- isShowがfalseの時に描画される -->
  <div v-show="!isShow" class="nav__icon" @click="showNav">
    <i class="fas fa-bars fa-3x"></i>
  </div>
  <div v-show="nav.isShow" class="nav__inner">
    <!-- 省略: メニューの中身 -->
  </div>
  <div v-show="nav.isShow" class="nav__bg"></div>
</nav>

3. メニューの中身を v-on:click で非表示にしましょう。

#3-1. 関数を用意する。

app.js

new Vue({
  el: '#app',
  data: {
    isShow: false,
  },
  methods: {
    showNav() {
      this.isShow = true;
    },
    hiddenNav() {
      this.isShow = false: // 追加
    },
  },
});

#3-2. v-on:click を記載する。

index.html

<div v-show="isShow" class="nav__inner">
  <!-- v-onディレクティブを記載する -->
  <!-- クリックされた時hiddenNavを実行する -->
  <div class="nav__icon nav__icon--times" @click="hiddenNav">
    <i class="fas fa-times fa-3x"></i>
  </div>
  <ul class="nav__menu">
    <li class="nav__item">
      <a class="nav__link" href="#">メニュー1</a>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">メニュー2</a>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">メニュー3</a>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">メニュー4</a>
    </li>
  </ul>
</div>
<!-- v-onディレクティブを記載する -->
<div v-show="isShow" class="nav__bg" @click="hiddenNav"></div>