Vue之路tab栏切换

前言

我们在项目中经常会用到tab切换，如何逻辑还不清晰，就学起来吧

第一种 v-show 控制内容姐姐换

理论就是点击判断一个值为开关，从而显示隐藏

分析版

<template>
  <div>
    <!-- tab -->
      <ul>
        <li @click="Show=0" :class="{active:num==0}">点赞</li>
        <li @click="Show=1" :class="{active:num==1}">关注</li>
        <li @click="Show=2" :class="{active:num==2}">收藏</li>
      </ul>
    
    <!-- 内容 -->
    <div>
      <div v-show="Show == 0">1</div>
      <div v-show="Show == 1">1</div>
      <div v-show="Show == 2">1</div>
    </div>
  </div>
</template>

<script>
export default {
    
    
  name: "Index",
  data(){
    
    
    return {
    
     //在data中设置Show默认为0 也就是说默认显示第一个
      Show:0 //通过点击事件改编num值，实现tab样式和内容的显示隐藏
    }
  }
};
</script>

<style>
</style>

数据渲染

<template>
  <div>
    <!-- tab -->
    <div v-for="(item,index) in list" :key="index+'1'" @click="num=index" :class="{active:num==index}">{
    
    {
    
    item}}</div>
    <div v-for="(items,index) in listDetall" :key="index" v-show="num==index">{
    
    {
    
    items}}</div>
    <!-- 内容 -->
   
  </div>
</template>

<script>
export default {
    
    
  name: "Index",
  data(){
    
    
    return {
    
    
      list:["点赞","收藏","评论"],
      listDetall:["点赞","收藏","评论"],
      num:0
    }
  }
};
</script>

<style>
</style>

第二种is，keep-alive缓存

<template>
  <div class="root">
    <a href="" @click.prevent="comName='one'">一班</a>
    <a href="" @click.prevent="comName='two'">二班</a>
    <a href="" @click.prevent="comName='three'">三班</a>
    <component :is="comName"></component>
   
    <!--这种方式也可以，只是需要调整样式<div  @click="comName='one'">一班</div>
    <div  @click="comName='two'">二班</div>
    <div @click="comName='three'">三班</div>-->
    
  </div>
</template>
 
<script>
import one from './one'
import two from './two'
import three from './three'
export default {
    
    
  components:{
    
    
    one,two,three
  },
  data() {
    
    
    return {
    
    
      comName:'one'
    };
  },
  methods: {
    
    
   
  },
};
</script>
<style lang="stylus" scoped>
.root {
    
    
  margin: 20px 100px;
  width 80%
  height 60%
  border 1px solid red
  a {
    
    
    margin-right 20px
    line-height 50px
  }
}
</style>

三用路由的形式

注意路由配置为子路由形式