vue3教程：案例-点击按钮实现切换div-马育民老师

# 说明

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

[![](/upload/0/0/1IX8U4k951jX.png)](/upload/0/0/1IX8U4k951jX.png)

### 代码
```
<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>
```

原文出处：http://malaoshi.top/show_1GWRfQlpjWI.html