v-for案例选项卡
时间: 2024-09-23 19:08:33 浏览: 14
`v-for` 是 Vue.js 中的一个指令,常用于遍历数组或对象,并创建动态元素。在构建选项卡组件时,`v-for` 往往用于生成多组可切换的选项卡内容。这里是一个简单的例子:
```html
<template>
<div class="tab-container">
<button v-for="(tab, index) in tabs" :key="index" @click="activeTab = index">
{{ tab.title }}
</button>
<!-- 使用 v-if 或者 v-show 来显示对应的内容 -->
<div v-for="(content, index) in contents" :key="index" v-if="activeTab === index">
{{ content.content }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
tabs: [
{ title: 'Tab 1', content: 'Content for Tab 1' },
{ title: 'Tab 2', content: 'Content for Tab 2' },
{ title: 'Tab 3', content: 'Content for Tab 3' }
],
activeTab: 0 // 初始激活第一个选项卡
};
}
};
</script>
```
在这个例子中,当用户点击每个选项卡按钮时,`activeTab` 的值会被更新,进而通过 `v-if` 或 `v-show` 指令控制显示哪个选项卡的内容。