怎么在vue2.0中实现一个tab标签切换效果

tangjin

作者

怎么在vue2.0中实现一个tab标签切换效果？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

html部分

怎么在vue2.0中实现一个tab标签切换效果

<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
</head>
<styletype="text/css">
.tab{width:100px;height:30px;text-align:center;border:1pxsolid#ccc;float:left;line-height:30px;}
.on{background:red;color:#fff;}
</style>
<scriptsrc="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<scriptsrc="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<body>
<divid="app"v-cloak>
<!--我这判断下标，是测试使用的，建议大家判断的时候改成tab1...这种-->
<!--而且我分别用不同的class类名来区别内容是否已更新，大家看的时候，可以查看代码变化-->
<divclass="aa"v-if="avlist==0">aaa内容可以自行修改</div>
<divclass="bb"v-else-if="avlist==1">内容可以自行修改bbb</div>
<divclass="cc"v-else-if="avlist==2">内容可以自行修改ccc</div>
<divclass="dd"v-else-if="avlist==3">内容可以自行修改ddd</div>
<templatev-for="(key,index)inlist">
<divclass="tab":class="{'on':isclass[index]}"@click="handal(index)">{{key}}</div>
</template>
</div>
</body>

js部分

<script>
varvm=newVue({
el:"#app",
data:{
list:['tab1','tab2','tab3','tab4'],
isclass:[true,false,false,false],//用来表示状态，这个可以修改也可以优化掉
avlist:0,
},
methods:{
handal:function(a){
this.avlist=a;
for(vari=0;i<this.isclass.length;i++){
this.isclass[i]=false;
this.isclass[a]=true;
}
}
},
})
</script>

关于怎么在vue2.0中实现一个tab标签切换效果问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注恰卡编程网行业资讯频道了解更多相关知识。

阅读全文

发布于 2021-04-15 01:56:22