Vue实现Tabs页面切换(原生)

实习的第一个小任务，浅记一下。

任务是：用vue写原生的element中Tabs页面切换组件的效果，因为目前只看了一部分网课，能力还太弱了，使用了最笨的方法把它写了出来，后续再慢慢改进叭！

记录一下主要代码 

<template>
  <div>
    <h1>{{ msg }}</h1>
      <button class="first" @click="isActive=0">用户管理</button>
      <button class="second" @click="isActive=1">配置管理</button>
      <button class="third" @click="isActive=2">角色管理</button>
      <button class="fourth" @click="isActive=3">定时任务补偿</button>

      <div class="first1" v-if="isActive==0">用户管理</div>
      <div class="second2" v-else-if="isActive==1">配置管理</div>
      <div class="third3" v-else-if="isActive==2">角色管理</div>
      <div class="fourth4" v-else-if="isActive==3">定时任务补偿</div>
  </div>
</template>

<script>
export default {
  name: 'TabsShow',
  data() {
    return {
      isActive: -1,
    };
  },
  props: {
    msg: String,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
   h1{
     font-family:"宋体"
   }
   .first{
     background-color: rgb(141, 228, 250);
     width:120px;
     line-height:30px;
   }
  .second{
     background-color: pink;
     width:120px;
     line-height:30px;
   }
   .third{
     background-color: rgb(197, 248, 184);
     width:120px;
     line-height:30px;
   }
   .fourth{
     background-color: rgb(241, 241, 188);
     width:120px;
     line-height:30px;
   }
   .first1{
     background-color: rgb(141, 228, 250);
     width:480px;
     line-height:30px;
     margin:0 auto;
   }
  .second2{
     background-color: pink;
     width:480px;
     line-height:30px;
     margin:0 auto;
   }
   .third3{
     background-color: rgb(197, 248, 184);
     width:480px;
     line-height:30px;
     margin:0 auto;
   }
   .fourth4{
     background-color: rgb(241, 241, 188);
     width:480px;
     line-height:30px;
     margin:0 auto;
   }
</style>

<template>
<div class=TabsShow>
  <img alt="Vue logo" src="./assets/logo.png">
  <TabsShow msg="管理平台"/>
</div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue';
import TabsShow from './components/TabsShow.vue';

export default {
  name: 'App',
  components: {
    // HelloWorld,
    TabsShow,
  },
};
</script>

<style>
  #app {
    text-align: center;
    margin-top: 60px;
  }
</style>

其效果如下： 

 

在完成这个任务的过程中，复习到了一些小知识点：

①要使得四个<div>都在同一个水平线上，要使用 display: inline-block;

② 要让文字在<div>或<button>垂直都居中，要使用 line-height:...px; 来调节一下

③要让一个<div>在页面中水平居中，要使用 margin:0 auto;

下一步需要做的：

把它简化，不要用这种傻瓜式语句。