说明

实现下图切换效果，点击 学生管理 按钮时，显示学生管理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>

var app = new Vue(
{
    el: '#app', //el是element缩写
    data: { //数据
        msg: 'Hello Vue!',
        panel:'student', // student，chengji
    },
    methods:{
        change(s){
            //  通过 this.data中的数据 方式才能访问、设置
            this.panel = s
            console.log(s)
        }
    }
})

原文出处：/show_1IX8U4mJWvtc.html