# Vueコード答え・解説
### 1. メニューの中身を v-show で管理する。
#### #1-1. 変数を用意する。
{% tabs %}
{% tab title="app.js" %}
```javascript
new Vue({
el: '#app',
data: {
isShow: false, // 追加
},
});
```
{% endtab %}
{% endtabs %}
#### #1-2. メニューの中身とマスクに v-show を記載する。
{% tabs %}
{% tab title="index.html" %}
```markup
```
{% endtab %}
{% endtabs %}
### 2. メニューを v-on:click で表示できるようにする。
#### #2-1. 関数を用意する。
{% tabs %}
{% tab title="app.js" %}
```javascript
new Vue({
el: '#app',
data: {
isShow: false,
},
methods: {
showNav() {
this.isShow = true; // 追加
},
},
});
```
{% endtab %}
{% endtabs %}
#### #2-2. ハンバーガーアイコンに v-on:click を記載する。
{% tabs %}
{% tab title="index.html" %}
```markup
```
{% endtab %}
{% endtabs %}
#### #2-3. メニューを表示した時にハンバーガーアイコンを非表示にする。
{% tabs %}
{% tab title="index.html" %}
```markup
```
{% endtab %}
{% endtabs %}
### 3. メニューの中身を v-on:click で非表示にしましょう。
#### #3-1. 関数を用意する。
{% tabs %}
{% tab title="app.js" %}
```javascript
new Vue({
el: '#app',
data: {
isShow: false,
},
methods: {
showNav() {
this.isShow = true;
},
hiddenNav() {
this.isShow = false: // 追加
},
},
});
```
{% endtab %}
{% endtabs %}
#### #3-2. v-on:click を記載する。
{% tabs %}
{% tab title="index.html" %}
```markup
```
{% endtab %}
{% endtabs %}