本文档介绍如何在Vue中创建一个简单的选项卡组件。通过创建`Tab`组件，利用v-for指令遍历数据，根据点击事件改变当前选中项，并通过v-show控制内容的显示。在`App.vue`中引入并使用`Tab`组件，最后在`main.js`中配置引用。运行项目，可以看到一个可切换的选项卡效果。
vue写一个简单的选项卡
先创建两个文件，tab为组件，方便调用
tab的内容：
<template>
<div id="tab">
<div class="tab-bar clearfix">
<a href="javascript:;"
@click="tab(index)"
v-for="(item,index) in items"
:class="{active : index===curId}"
>{
{item.item}}</a>
</div>
<div class="tab-con">
<div
v-show="index===curId"
v-for="(content, index) in contents" >{
{content.content}}</div>
</div>
</div>
&
最低0.47元/天 解锁文章
扫一扫
310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
