vue+js 实现tab选项卡

最新推荐文章于 2021-11-20 11:31:40 发布

零月§连芯@

最新推荐文章于 2021-11-20 11:31:40 发布

阅读量172

点赞数

文章标签： vue js

本文链接：https://blog.csdn.net/qq_43531886/article/details/112725325

版权

本文展示了如何使用Vue.js实现内容的动态切换。通过`v-for`指令遍历tabs数组，根据`cur`变量切换显示不同的内容区域。点击tab时，`changeTabs`方法改变`cur`的值，从而更新显示的`showBox`内容。同时，利用CSS实现了不同状态下的tab样式，如选中时的背景色和文字颜色变化。

摘要由CSDN通过智能技术生成

布局

    <div class="tabsWrap">
      <div v-for="(item,index) in tabs" :key="index" :class="cur == index?'groupsBox':'shopsBox'" @click="changeTabs(index)">{{item.name}}</div>
    </div>
    <div class="showBox" v-show="cur==0">
      Shops
    </div>
    <div class="showBox" v-show="cur==1">
      Shops Groups
    </div>

js逻辑

 data(){
    return{
      cur:0,
      tabs:[{name:'Shops'},{name:'Shops Groups'}]
    }
  },
  methods:{
    changeTabs(index){
      console.log(index)
      this.cur =index
    }
  }

css样式

<style lang="less" scoped>
  .tabsWrap{
    display: flex;
    width: 280px;
    height: 38px;
    background: #c4c4c4;
    border-radius: 8px;
  }
  .shopsBox{
    width: 140px;
    height: 38px;
    border-radius: 8px;
    color: #44444F;
    line-height: 38px;
  }
  .groupsBox{
    width: 140px;
    height: 38px;
    border-radius: 8px;
    background: #0062FF;
    color: white;
    line-height: 38px;
  }
  .showBox{
    width: 300px;
    height: 300px;
    border: 1px solid red;
    color: black;
    margin-top: 20px;
  }
</style>