2025年01月17日 建站教程
如何利用vue做一个选项卡切换效果，下面web建站小编给大家简单介绍一下具体实现代码！
具体实现代码如下：
<template>
<div>
<ul>
<li v-for="(item, index) in tabs" :key="index" :class="{ active: item.active }"
@click="selectedTab = item">
{{ item.name }}
</li>
</ul>
<div v-for="(item, index) in tabs" :key="index" v-if="item.active">
{{ item.content }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
tabs: [
{ name: 'tab1', content: '内容1', active: true }, //默认
{ name: 'tab2', content: '内容2', active: false },
{ name: 'tab3', content: '内容3', active: false }
]
}
},
computed: {
selectedTab() {
return this.tabs.find(item => item.active);
}
},
methods: {
selectTab(item) {
this.tabs.forEach(item => item.active = false);
item.active = true;
}
}
}
</script>
本文链接：http://so.lmcjl.com/news/21521/