vue切换导航栏更新内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tab-item{
padding: 10px;
margin: 10px;
border: 1px solid #ddd;
cursor: pointer;
}
.tab-content {
border: 1px solid #ddd;
padding: 20px 0;
}
</style>
</head>
<body>
<div id="app">
<div class="tab-items">
<span class="tab-item" v-for="(v,i) in tabs" :key="i" @click="tabIndex = i">{{v}}</span>
</div>
<p>tab-content: </p>
<div class="tab-content">
<span v-show="tabIndex == 0">tab1 内容</span>
<span v-show="tabIndex == 1">tab2 内容</span>
<span v-show="tabIndex == 2">tab3 内容</span>
</div>
<p>====================================================</p>
<div class="tab-items">
<!-- 以唯一的id为索引 -->
<span class="tab-item" v-for="(v,i) in tabGroups" :key="i" @click="activeTab = v.id">{{v.name}}</span>
</div>
<p>tab-content: </p>
<!-- 以唯一的id匹配 -->
<div class="tab-content" v-for="(v,i) in tabGroups" :key="i" v-show="activeTab === v.id">{{v.content}}</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
tabIndex: 0,
tabs: ['tab1','tab2','tab3'],
activeTab: '',
tabGroups: [],
},
mounted() {
// 本地数据,也可以是接口数据,拿到数据后初始化
this.tabGroups = [
{
id: 1,
name: 'tab1',
content: 'this is Tab1.'
},
{
id: 2,
name: 'tab2',
content: 'this is Tab2.'
},
{
id: 3,
name: 'tab3',
content: 'this is Tab3.'
}
];
// 设置处事tab值
this.activeTab = this.tabGroups[0].id;
}
});
</script>
</body>
</html>