好的，以下是一个简单的 Vue
实现 tab 栏切换的代码示例。
首先，需要在 Vue 实例中定义一个 data，用来存储当前选中的
tab：
```
javascript
new Vue({
el: '#app',
data: {
current
Tab: '
tab1'
},
methods: {
select
Tab(
tab) {
this.current
Tab =
tab
}
}
})
```
然后，在 HTML 中使用 v-bind 和 v-on 指令来绑定数据和事件：
```html
<div id="app">
<div class="
tabs">
<div class="
tab" :class="{ 'active': current
Tab === '
tab1' }" @click="select
Tab('
tab1')">
Tab 1</div>
<div class="
tab" :class="{ 'active': current
Tab === '
tab2' }" @click="select
Tab('
tab2')">
Tab 2</div>
<div class="
tab" :class="{ 'active': current
Tab === '
tab3' }" @click="select
Tab('
tab3')">
Tab 3</div>
</div>
<div class="
tab-content">
<div class="
tab-pane" v-show="current
Tab === '
tab1'">
Content for
tab 1
</div>
<div class="
tab-pane" v-show="current
Tab === '
tab2'">
Content for
tab 2
</div>
<div class="
tab-pane" v-show="current
Tab === '
tab3'">
Content for
tab 3
</div>
</div>
</div>
```
在这个示例中，使用了 v-bind:class 指令来动态绑定 class，根据当前选中的
tab 判断是否添加 active 类名。同时使用了 v-on:click 指令来监听点击事件，并调用 select
Tab 方法
切换 tab。
最后，在 CSS 中定义样式：
```css
.
tabs {
display: flex;
}
.
tab {
padding: 10px;
cursor: pointer;
}
.
tab.active {
background-color: #ccc;
}
.
tab-content {
border: 1px solid #ccc;
padding: 10px;
}
.
tab-pane {
display: none;
}
.
tab-pane.show {
display: block;
}
```
在这个示例中，使用了 display 属性来控制
tab 内容的显示，根据当前选中的
tab 判断是否显示。同时为 active 类名和 show 类名分别定义了样式，使得选中的
tab 和对应的内容高亮显示。
以上就是一个简单的 Vue
实现 tab 栏切换的代码示例，希望对你有所帮助。
超级会员免费看
订阅专栏 解锁全文
858
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
