vue3教程:案例-点击按钮实现切换div

说明

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

代码

  1. <style>
  2. #student{
  3. width: 300px;
  4. height: 200px;
  5. background-color: antiquewhite;
  6. }
  7. #chengji{
  8. width: 300px;
  9. height: 200px;
  10. background-color: burlywood;
  11. }
  12. </style>
  1. <div id="app">
  2. <button v-on:click="change('student')">学生管理</button>
  3. <button @click="change('chengji')">成绩管理</button>
  4. <div id="student" v-if="panel == 'student'">
  5. 学生管理
  6. </div>
  7. <div id="chengji" v-else-if =" panel == 'chengji' ">
  8. 成绩管理
  9. </div>
  10. </div>
  1. <script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
  2. <script type="importmap">
  3. {
  4. "imports": {
  5. "vue": "./js/vue.esm-browser@3.5.13.js"
  6. }
  7. }
  8. </script>
  9. <script type="module">
  10. import { createApp } from 'vue'
  11. createApp({
  12. data: function(){
  13. return{
  14. msg: 'Hello Vue!',
  15. panel:'student'
  16. }
  17. },
  18. methods:{ // 在 methods 对象中定义方法
  19. change(s){
  20. // 通过 this.data中的数据 方式才能访问、设置
  21. this.panel = s
  22. console.log(s)
  23. }
  24. }
  25. }).mount('#app')
  26. </script>

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