在vue中,tab标签页如何默认展开第一页内容·
时间: 2023-11-27 13:50:18 浏览: 40
在Vue中,可以通过设置 `active` 属性来控制默认展开的标签页。具体实现方法如下:
1. 在标签页组件中添加 `active` 属性,并设置默认值为 `true` 或 `1`,表示第一个标签页默认展开。
```html
<template>
<div>
<ul class="nav nav-tabs">
<li :class="{ active: activeTab === 1 }" @click="activeTab = 1"><a href="#tab1">Tab 1</a></li>
<li :class="{ active: activeTab === 2 }" @click="activeTab = 2"><a href="#tab2">Tab 2</a></li>
<li :class="{ active: activeTab === 3 }" @click="activeTab = 3"><a href="#tab3">Tab 3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" :class="{ active: activeTab === 1 }" id="tab1">Tab 1 Content</div>
<div class="tab-pane" :class="{ active: activeTab === 2 }" id="tab2">Tab 2 Content</div>
<<div class="tab-pane" :class="{ active: activeTab === 3 }" id="tab3">Tab 3 Content</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeTab: 1
};
}
};
</script>
```
2. 在标签页组件的 `mounted` 钩子函数中,设置 `activeTab` 的值为 `1` 或者其他默认展开的标签页的索引值。
```html
<template>
<div>
<ul class="nav nav-tabs">
<li :class="{ active: activeTab === 1 }" @click="activeTab = 1"><a href="#tab1">Tab 1</a></li>
<li :class="{ active: activeTab === 2 }" @click="activeTab = 2"><a href="#tab2">Tab 2</a></li>
<li :class="{ active: activeTab === 3 }" @click="activeTab = 3"><a href="#tab3">Tab 3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" :class="{ active: activeTab === 1 }" id="tab1">Tab 1 Content</div>
<div class="tab-pane" :class="{ active: activeTab === 2 }" id="tab2">Tab 2 Content</div>
<<div class="tab-pane" :class="{ active: activeTab === 3 }" id="tab3">Tab 3 Content</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeTab: 0 // 初始值设为0
};
},
mounted() {
this.activeTab = 1; // 设置默认展开的标签页为第一个
}
};
</script>
```
通过以上两种方法,您可以在Vue中实现默认展开第一页内容的标签页。