vue tab切换

目录:

效果图:只是一个小小的demo大家将就着看,

 在XXX.vue页面写入:

<template>
    <div>
    　　<div>#动态组件实现tab切换效果#</div><br><br><br>
    　　　　<nav >
    　　　　　　<div href="javascript:void(0);" @click="toggleTabs(first);">{{first}}</div>
            　 <div href="javascript:void(0);" @click="toggleTabs(second);">{{second}}</div>
            　 <div href="javascript:void(0);" @click="toggleTabs(third);">{{third}}</div>
    　　　　</nav>

<!-- 动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换。如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数  -->
　　　　　　<first :is="currentView" keep-alive class="first"></first>
　　    </div>
</template>

<script  type="text/ecmascript-6">
//导入子组件
import first from "./components/first";
import second from "./components/second";
import third from "./components/third";

export default {
  data() {
    return {
      first: "first", //导航栏文本1
      second: "second", //导航栏文本2
      third: "third", //导航栏文本3
      currentView: "first" //默认选中first子组件
    };
  },
  components: {
    first,
    second,
    third
  },
  methods: {
    toggleTabs(tabText) {
      this.currentView = tabText;
      console.log(tabText)
    }
  }
};
</script>
<style scoped>
nav{
  width: 20%;
  float: left;
  margin: 30px ;
}
nav div{
  width: 100%;
  height: 100%;
  margin-top: 30px;
  color: rgb(212, 197, 228);
  background: rgb(0, 0, 255);
}
.first{
  width: 70%;
  margin-top: 60px;
  float: right;
}

</style>

分别记得新建对应的文件名:

first.vue

<template>
    <div class="first">我是第一个子组件</div>
</template>
<script>
export default {
    data(){
        return{

        }
    }
}
</script>
<style scoped>
.first{
    color: #fff;
    background: yellowgreen;
}
</style>

 second.vue

<template>
    <div>我是第二个子组件</div>
</template>
<script>
export default {
    data(){
        return{

        }
    }
}
</script>
<style scoped>
div{
    color:  rgb(235, 107, 117);
    background:rgb(14, 1, 1);
}
</style>

third.vue

<template>
    <div class="third">我是第三个子组件</div>
</template>
<script>
export default {
    data(){
        return{

        }
    }
}
</script>
<style scoped>
.third{
    color: #fff;
    background: rgb(235, 117, 117);
}
</style>