전환 메뉴를 만들고 싶어요!

음료 메뉴 버튼을 눌렀을 때 음료 메뉴만 표시됩니다
음식 메뉴 버튼을 눌렀을 때 음식 메뉴만 표시됩니다
하고 싶어!

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 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로 탭 메뉴 만들기