vue简单实现选项卡
Html
<div class="list" v-for="(item,index) in list" :key="index" :class="{active:index === con}" @click="tab(index)">{
{item.name}}</div>
<div class="content" v-show="con === 0">1</div>
<div class="content" v-show="con === 1">2</div>
<div class="content" v-show="con === 2">3</div>
script
data() {
return {
list:[
{name:'选项卡1'},
{name:'选项卡2'},
{name:'选项卡3'},
],
con:0,
}
},
methods: {
tab(index){
this.con =index
}
},
css
.list{
display: