vue实现一个tab切换

本节案例利用vue制作一个tab切换效果

• 1、效果图

  

• 2、基本的页面代码

  <div class="hello">
      <div class="btn-group">
          <button v-for="(item,index) in btn" v-bind:class="{active:(indexs==index)}" v-on:click="a(index)" :key="index">{{item}}</button>
      </div>
      <div class="wrap">
          <div v-for="(w,key,index) in box" v-if="indexs == index" :key="index">{{w}}-{{key}}</div>
      </div>
  </div>

• 3、js代码

  <script>
  export default {
      data() {
          return {
              btn: ['按钮1','按钮2','按钮3'],
              box: { aa: "tab切换1", bb: "tab切换2", cc: "tab切换3" },
              indexs: 0,
          }
      },
      methods: {
          a(str) {
              this.indexs = str;
          }
      }
  }
  </script>

• 4、样式文件

  .btn-group{
      width:50%;
      margin: 0 auto;
  }
  button{
      border:none;
      width: 50px;
      height: 30px;
  }
  .wrap div {
      width: 100%;
      height: 300px;
      background-color: #0cc;
  }
  
  .active {
      background-color: red
  }