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