Vue选项卡案例

原理分析与实现

1、动态切换class 【 :class="[showPage == index ? 'act' : '']" 】

2、v-show，根据表达式的真假值，切换元素的display属性 【 v-show="showPage == index" 】

下面进入正题

完整代码

HTML部分

<template>
    <div>
      <div class="tabBar">
        <span 
          :class="[showPage == index ? 'act' : '']"
          v-for="(item, index) in btnList"
          :key="index"
          @click="handlerPage(index)"
          >
          {{ item }}
        </span>
      </div>
      <div 
        class="page"
        v-for="(item, index) in pageList"
        :key="index"
        v-show="showPage == index"
        >
        {{ item }}
      </div>
    </div>
</template>

JS部分

<script>
export default {
    data() {
      return {
        btnList:[
          '工程领域',
          '工程服务',
          '建筑材料',
          '基础材料'
        ],
        pageList:[
          '工程领域',
          '工程服务',
          '建筑材料',
          '基础材料'
        ],
        showPage: 0,
      }
    },
    created(){
    },
    computed:{
    },
    methods:{
      handlerPage(index){
        this.showPage = index;
      }
    },
}
</script>

css部分

<style lang="scss" scoped>
  .tabBar{
    width: 400px;
    height: 50px;
    span{
      display: inline-block;
      width: 98px;
      height: 50px;
      border: 1px solid #ccc;
      text-align: center;
      line-height: 50px;
    }
    .act{
      background: skyblue;
    }
  }
  .page{
    width: 398px;
    height: 200px;
    border: 1px solid #ccc;
  }

</style>