Vue实现Tabs页面切换(原生)——改进版

昨晚先大约做了一下基本的要求，今天早上花了点时间实现选择左右上下显示的功能，仍然是比较简单的语句，我发现原来用模板来写如此简单！复制粘贴改一改就好了。但还是要记录一下代码，后续实习期间需要用到可以翻出来看看。

记录一下主要代码  

1.Top

<template>
  <div>
    <h1>{{ msg }}</h1>
      <button class="first" :class="{'ActiveBtn':isActive==0}" @click="showActice(0)">用户管理</button>
      <button class="second" :class="{'ActiveBtn':isActive==1}"
       @click="showActice(1)">配置管理</button>
      <button class="third" :class="{'ActiveBtn':isActive==2}" @click="showActice(2)">角色管理</button>
      <button class="fourth" :class="{'ActiveBtn':isActive==3}"
       @click="showActice(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,
  },
  methods: {
    showActice(a) {
      this.isActive = a;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
   h1{
     font-family:"宋体"
   }
   .ActiveBtn{
      color: rgb(69, 71, 233);
   }
   .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>

2. Left

<template>
  <div>
    <h1>{{ msg }}</h1>
    <div class="div1">
      <button class="first" :class="{'ActiveBtn':isActive==0}"
      @click="showActice(0)">用户管理</button><br/>
      <button class="second" :class="{'ActiveBtn':isActive==1}"
       @click="showActice(1)">配置管理</button><br/>
      <button class="third" :class="{'ActiveBtn':isActive==2}"
      @click="showActice(2)">角色管理</button><br/>
      <button class="fourth" :class="{'ActiveBtn':isActive==3}"
       @click="showActice(3)">定时任务补偿</button>
    </div>
    <div class="div1">
      <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>
  </div>
</template>

<script>
export default {
  name: 'TabsShowLeft',
  data() {
    return {
      isActive: 0,
    };
  },
  props: {
    msg: String,
  },
  methods: {
    showActice(a) {
      this.isActive = a;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
   .div1{
     display:inline-block;
     vertical-align: bottom;
   }
   h1{
     font-family:"宋体"
   }
   .ActiveBtn{
      color: rgb(69, 71, 233);
   }
   .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:144px;
     margin:0 auto;
   }
  .second2{
     background-color: pink;
     width:480px;
     line-height:144px;
     margin:0 auto;
   }
   .third3{
     background-color: rgb(197, 248, 184);
     width:480px;
     line-height:144px;
     margin:0 auto;
   }
   .fourth4{
     background-color: rgb(241, 241, 188);
     width:480px;
     line-height:144px;
     margin:0 auto;
   }
</style>

3. Right

<template>
  <div>
    <h1>{{ msg }}</h1>
    <div class="div1">
      <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>
    <div class="div1">
      <button class="first" :class="{'ActiveBtn':isActive==0}"
      @click="showActice(0)">用户管理</button><br/>
      <button class="second" :class="{'ActiveBtn':isActive==1}"
       @click="showActice(1)">配置管理</button><br/>
      <button class="third" :class="{'ActiveBtn':isActive==2}"
      @click="showActice(2)">角色管理</button><br/>
      <button class="fourth" :class="{'ActiveBtn':isActive==3}"
       @click="showActice(3)">定时任务补偿</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TabsShowRight',
  data() {
    return {
      isActive: 0,
    };
  },
  props: {
    msg: String,
  },
  methods: {
    showActice(a) {
      this.isActive = a;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
   .div1{
     display:inline-block;
     vertical-align: bottom;
   }
   h1{
     font-family:"宋体"
   }
   .ActiveBtn{
      color: rgb(69, 71, 233);
   }
   .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:144px;
     margin:0 auto;
   }
  .second2{
     background-color: pink;
     width:480px;
     line-height:144px;
     margin:0 auto;
   }
   .third3{
     background-color: rgb(197, 248, 184);
     width:480px;
     line-height:144px;
     margin:0 auto;
   }
   .fourth4{
     background-color: rgb(241, 241, 188);
     width:480px;
     line-height:144px;
     margin:0 auto;
   }
</style>

4.Buttom

<template>
  <div>
    <h1>{{ msg }}</h1>
    <div>
      <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>
      <button class="first" :class="{'ActiveBtn':isActive==0}"
      @click="showActice(0)">用户管理</button>
      <button class="second" :class="{'ActiveBtn':isActive==1}"
       @click="showActice(1)">配置管理</button>
      <button class="third" :class="{'ActiveBtn':isActive==2}"
      @click="showActice(2)">角色管理</button>
      <button class="fourth" :class="{'ActiveBtn':isActive==3}"
       @click="showActice(3)">定时任务补偿</button>
  </div>
</template>

<script>
export default {
  name: 'TabsShowButtom',
  data() {
    return {
      isActive: 0,
    };
  },
  props: {
    msg: String,
  },
  methods: {
    showActice(a) {
      this.isActive = a;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
   h1{
     font-family:"宋体"
   }
   .ActiveBtn{
      color: rgb(69, 71, 233);
   }
   .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:144px;
     margin:0 auto;
   }
  .second2{
     background-color: pink;
     width:480px;
     line-height:144px;
     margin:0 auto;
   }
   .third3{
     background-color: rgb(197, 248, 184);
     width:480px;
     line-height:144px;
     margin:0 auto;
   }
   .fourth4{
     background-color: rgb(241, 241, 188);
     width:480px;
     line-height:144px;
     margin:0 auto;
   }
</style>

5.App

<template>
<div>
  <button key="top" @click="isShow=0">Top</button>
  <button key="left" @click="isShow=1">Left</button>
  <button key="right" @click="isShow=2">Right</button>
  <button key="buttom" @click="isShow=3">Buttom</button>

  <div v-if="isShow==0">
    <img alt="Vue logo" src="./assets/logo.png">
    <TabsShow msg="管理平台"/>
  </div>
  <div v-else-if="isShow==1">
    <img alt="Vue logo" src="./assets/logo.png">
    <TabsShowLeft msg="管理平台"/>
  </div>
  <div v-else-if="isShow==2">
    <img alt="Vue logo" src="./assets/logo.png">
    <TabsShowRight msg="管理平台"/>
  </div>
    <div v-else-if="isShow==3">
    <img alt="Vue logo" src="./assets/logo.png">
    <TabsShowButtom msg="管理平台"/>
  </div>
</div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue';
import TabsShow from './components/TabsShow.vue';
import TabsShowLeft from './components/TabsShow-left.vue';
import TabsShowRight from './components/TabsShow-right.vue';
import TabsShowButtom from './components/TabsShow-buttom.vue';

export default {
  name: 'App',
  data() {
    return {
      isShow: -1,
    };
  },
  components: {
    // HelloWorld,
    TabsShow,
    TabsShowLeft,
    TabsShowRight,
    TabsShowButtom,
  },
};
</script>

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

 效果图：

 第一个任务的基本要求完成了！