可以通过以下步骤使用
vue2脚手架实现
tab选项卡：
1. 在父组件中定义一个数组
tabs，包含
选项卡的标题和内容：
```javascript
data() {
return {
tabs: [
{ title: '
选项卡1', content: '内容1' },
{ title: '
选项卡2', content: '内容2' },
{ title: '
选项卡3', content: '内容3' }
],
active
Tab: 0
}
}
```
2. 在模板中使用v-for指令渲染
选项卡的标题，并绑定click事件，将索引赋值给active
Tab：
```html
<template>
<div>
<div class="
tabs">
<div v-for="(
tab, index) in
tabs" :key="index" :class="{ active: active
Tab === index }" @click="active
Tab = index">{{
tab.title }}</div>
</div>
<div class="
tab-content">{{
tabs[active
Tab].content }}</div>
</div>
</template>
```
3. 根据active
Tab的值显示对应
选项卡的内容。可以使用计算属性实现：
```javascript
computed: {
activeContent() {
return this.
tabs[this.active
Tab].content
}
}
```
4. 根据需要自定义样式即可实现
tab选项卡效果。
完整代码示例：
```html
<template>
<div>
<div class="
tabs">
<div v-for="(
tab, index) in
tabs" :key="index" :class="{ active: active
Tab === index }" @click="active
Tab = index">{{
tab.title }}</div>
</div>
<div class="
tab-content">{{ activeContent }}</div>
</div>
</template>
<script>
export default {
data() {
return {
tabs: [
{ title: '
选项卡1', content: '内容1' },
{ title: '
选项卡2', content: '内容2' },
{ title: '
选项卡3', content: '内容3' }
],
active
Tab: 0
}
},
computed: {
activeContent() {
return this.
tabs[this.active
Tab].content
}
}
}
</script>
<style>
.
tabs {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #ccc;
margin-bottom: 10px;
}
.
tabs div {
padding: 10px;
cursor: pointer;
}
.
tabs div.active {
border-bottom: 2px solid #333;
}
.
tab-content {
padding: 10px;
}
</style>
```
1821
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
