切り替えメニューを作りたい!
飲み物メニューボタンを押したときは、飲み物のメニューだけを表示
食べ物メニューボタンを押したときは、食べ物のメニューだけを表示
したい!
scriptタグにメソッドとデータを準備
selectedMenu
というデータと
changeMenu
というメソッドを作る。
selectedMenu
の値は空文字でもよい。その場合初期状態では非表示になる。
<script>
export default {
components: {},
data: function () {
return {
selectedMenu: "1" //選択しない状態で何も表示したくないときは空文字でもよい。
}
},
methods: {
changeMenu: function (num) {
this.selectedMenu = num
}
}
}
</script>
templateタグの中を作っていきます
それぞれのメニューボタンを押すと、changeMenu()
が動いて、selectedMenu
の中身が変わる。
v-if
を使って、selectedMenu
の中身に応じて、表示・非表示を切り替えるようにする。
selectedMenu === 1にする凡ミスをよくやった。
型に注意!!
<template>
<button v-on:click="changeMenu('1')">飲み物メニュー</button>
<button v-on:click="changeMenu('2')">食べ物メニュー</button>
<ul v-if="selectedMenu==='1'">
<li>ビール</li>
<li>レモンサワー</li>
<li>お冷</li>
</ul>
<ul v-if="selectedMenu ==='2'"> //v-else-ifでもよい
<li>ハンバーグ</li>
<li>カレー</li>
<li>お茶漬け</li>
</ul>
</template>
ついでに、
どのメニューを選択しているかわかりやすいように、menuボタンに赤色でもつけておく。
v-bind
を使って、条件が合うとbutton
タグにactive
クラスが追加されるようにする。
オブジェクト構文というらしい。
buttonがactiveクラスになったときだけ、赤くなるようになった!
<button v-on:click="changeMenu('1')"
v-bind:class="{'active':selectedMenu ==='1'}"
>飲み物メニュー</button>
<button v-on:click="changeMenu('2')"
v-bind:class="{'active':selectedMenu ==='2'}"
>食べ物メニュー</button>
<style>
button.active {
color: red;
}
</style>