vue项目中点击tab选项卡切换案例(带源码)

其他写法

1.tab选项卡切换案例
2.tab切换多个单页面跳转
3.两个单页面v-if

源码

<template>
  <div class="box">
    <div class="nav">
        <div :class="{active:itemIndex == 1}" @click="get1(1)">标题1</div>
        <div :class="{active:itemIndex == 2}" @click="get1(2)">标题2</div>
        <div :class="{active:itemIndex == 3}" @click="get1(3)">标题3</div>
        <div :class="{active:itemIndex == 4}" @click="get1(4)">标题4</div>
        <div :class="{active:itemIndex == 5}" @click="get1(5)">标题5</div>
    </div>
    <div class="content">
      <div v-if="itemIndex === 1">内容1</div>
      <div v-if="itemIndex === 2">内容2</div>
      <div v-if="itemIndex === 3">内容3</div>
      <div v-if="itemIndex === 4">内容4</div>
      <div v-if="itemIndex === 5">内容5</div>
    </div>
  </div>
</template>

<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      itemIndex:1
    }
  },
  methods:{
    
    
    get1(index){
    
    
      this.itemIndex = index
    }
  }
}
</script>

<style scoped>
.box{
    
    
  display: flex;
  flex-direction: column;
}
.nav{
    
    
  width: 500px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.active{
    
    
  width: 60px;
  height: 30px;
  border: 1px solid red;
}

.content{
    
    
  width: 500px;
  height: 200px;
  border: 1px solid blueviolet;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>

效果如下图

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！