Vue.jsでメニュー 切り替え メモ

切り替えメニューを作りたい！

飲み物メニューボタンを押したときは、飲み物のメニューだけを表示
食べ物メニューボタンを押したときは、食べ物のメニューだけを表示
したい！

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>

参考

Vue.jsでタブメニューをつくる