vue2.0 tab切换几种方式
Posted 执候
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue2.0 tab切换几种方式相关的知识,希望对你有一定的参考价值。
第一种 比较灵活简单的方式(切换改变部分的内容在组件中比较方便操作)
<template> <div id="app"> <ul> <li v-for="(tab,index) in tabs" @click="toggle(index,tab.view)" :class="{active:active==index}"> {{tab.type}} </li> </ul> <!--:is实现多个组件实现同一个挂载点--> <component :is="currentView"></component> </div> </template> <script> import tab1 from \'./components/tabs/tab1.vue\' import tab2 from \'./components/tabs/tab2.vue\' export default { name: \'app\', data(){ return { active:0, currentView:\'tab1\', tabs:[ { type:\'tab1\', view:\'tab1\' }, { type:\'tab2\', view:\'tab2\' } ] } }, methods:{ toggle(i,v){ this.active=i; this.currentView=v; } }, components:{ tab1, tab2 } } </script> <style> #app { font-family: \'Avenir\', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* text-align: center; color: #2c3e50; margin-top: 60px; */ } ul{ width:200px; display:flex; } ul li{ width:100px; height:40px; background: #ccc; display: inline-flex; border-right:1px solid #ddd; justify-content: center; align-items: center;
cursor:pointer } ul li.active{ background:#333; } </style>
第二种(比较死板,内容被固定住了)
<template> <div id="app"> <ul > <li v-for="(tab,index) in tabs" :class="{active:num==index}" @click="table(index)">{{tab}}</li> </ul> <div class="tabContent"> <div v-for="(tabCon,index) in tabsCon" v-show="index==num">{{tabCon}}</div> </div> </div> </template> <script> /*import tab1 from \'./components/tabs/tab1.vue\' import tab2 from \'./components/tabs/tab2.vue\'*/ export default { name: \'app\', data(){ return { tabs:[\'按钮1\',\'按钮2\'], tabsCon:[\'内容1\',\'内容2\'], num:0 } }, methods:{ table(index) { this.num = index; } } /* components:{ tab1, tab2 }*/ } </script> <style> #app { font-family: \'Avenir\', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* text-align: center; color: #2c3e50; margin-top: 60px; */ } ul{ width:200px; display:flex; } ul li{ width:100px; height:40px; background: #ccc; display: inline-flex; border-right:1px solid #ddd; justify-content: center; align-items: center; cursor:pointer; } ul li.active{ background:#333; } </style>
第三种(比较死板,内容被固定住了,使用过jquery的人习惯用的方式)
<template> <div id="app"> <div class="nav-tab"> <a v-for="(value,index) in tab" :class="{active:value.isactive}" @click="change(index)"> {{value.title}} </a> </div> <div class="tabs"> <div v-for="(value,index) in tab" class="tab" :class="{active:value.isactive}">{{value.content}}</div> </div> </div> </template> <script> /*import tab1 from \'./components/tabs/tab1.vue\' import tab2 from \'./components/tabs/tab2.vue\'*/ export default { name: \'app\', data(){ return { tab: [{ title: \'tab1\', content: \'this is tab1\', isactive: true }, { title: \'tab2\', content: \'this is tab2\', isactive: false }] } }, methods: { change(index){ this.tab.forEach(function(v){ v.isactive=false }) this.tab[index].isactive=true } } } </script> <style> *{ padding:0; margin:0; box-sizing:border-box; } #app { font-family: \'Avenir\', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* text-align: center; color: #2c3e50; margin-top: 60px; */ width:100%; } .nav-tab{ width:100%; height: 30px; line-height:30px; display:flex; justify-content: space-around; } .nav-tab a{ flex:1; text-align: center; background:#ccc; border-right:1px solid #ddd; cursor:pointer; } .nav-tab a.active{ border-bottom:1px solid red; } .tabs .tab{ display: none; } .tabs .tab.active{ display:block; } </style>
以上是关于vue2.0 tab切换几种方式的主要内容,如果未能解决你的问题,请参考以下文章