Vue—tab页切换

1.首先将对应页面的代码以及CSS样式写好：
template

<div class="footer_center">
  <div class="center_left">
    <div>
       <el-radio v-model="num" :label="index">Active</el-radio>
    </div>
  </div>
  <div class="center_right" >1</div>
</div>

script

export default {
  data(){
    return {
      num: 0,
    }
  }
}

css

.footer_center{
  border: 1px solid #dee2ed;
  width: 100%;
  display: flex;
  .center_left{
    width: 35%;
    background: white;
    padding: 19px 21px;
    border-right: 1px solid #dee2ed;
    div{
      margin-bottom: 10px;
     }
     div:nth-of-type(1){
       padding-top: 8px;
     }
   }
   .center_right{
     width: 65%;
     background: #f8f8f8;
     color: #999999;
     font-size: 15px;
     padding: 19px 21px;
   }
 }

2.其次将对应页面的内容在script里面填写好在对应的地方进行渲染：
template

<div class="footer_center">
  <div class="center_left">
    <div v-for="(item,index) in SngleElection" :key="index">
       <el-radio v-model="num" :label="index">{{item}}</el-radio>
    </div>
  </div>
  <div class="center_right" v-for="(item,index) in cententData" :key="index" >{{ item.center }}</div>
</div>

script

export default {
  data(){
    return {
      num: 0,
      SngleElection: ['Active','Rrequesta','DestroyJavaVN',],
      cententData: [{
        center: '1'
      }, {
        center: '2'
      }, {
        center: '3'
      }, ],
    }
  }
}

3.最后在对应页面的内容中添加上tab页切换需要用的点击事件和对应的功能：
template

<div class="footer_center">
  <div class="center_left">
    <div v-for="(item,index) in SngleElection" :key="index" :class="{active: num == index}" @click="table(index)">
       <el-radio v-model="num" :label="index">{{item}}</el-radio>
    </div>
  </div>
  <div class="center_right" v-for="(item,index) in cententData" :key="index" v-show="index == num">{{ item.center }}</div>
</div>

script

export default {
  data(){
    return {
      num: 0,
      SngleElection: ['Active','Rrequesta','DestroyJavaVN',],
      cententData: [{
        center: '1'
      }, {
        center: '2'
      }, {
        center: '3'
      }, ],
    }
  },
  methods:{
    table(index){
      this.num = index;
    }
  }
}

最后要记得引入Element哦！