说明

实现下图切换效果，点击 学生管理 按钮时，显示学生管理div，点击成绩管理按钮时，显示成绩管理div：

代码

<style>
    #student{
        width: 300px;
        height: 200px;
        background-color: antiquewhite;
    }
    #chengji{
        width: 300px;
        height: 200px;
        background-color: burlywood;
    }
</style>

<div id="app">
    <button v-on:click="change('student')">学生管理</button>
    <button @click="change('chengji')">成绩管理</button>
    <div id="student" v-if="panel == 'student'">
        学生管理
    </div>
    <div id="chengji" v-else-if =" panel == 'chengji' ">
        成绩管理
    </div>
</div>

<script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
<script type="importmap">
{
    "imports": {
        "vue": "./js/vue.esm-browser@3.5.13.js"
    }
}
</script>
<script type="module">
  import { createApp } from 'vue'

  createApp({
    data: function(){
        return{
            msg: 'Hello Vue!',
            panel:'student'
        }
    },
    methods:{ // 在 methods 对象中定义方法
        change(s){
            //  通过 this.data中的数据 方式才能访问、设置
            this.panel = s
            console.log(s)
        }
    }

  }).mount('#app')
</script>

原文出处：/show_1GWRfQlpjWI.html