<template>
<div>
<ul>
<li
:class="currentIndex == index ? 'active' : ''"
v-for="(item, index) in list"
:key="item.id"
@click="toggle(index)"
>
{{ item.title }}
</li>
</ul>
<div
v-for="(item, index) in list"
v-show="currentIndex == index"
:key="item.id"
>
<p>{{ item.content }}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
currentIndex: 0, // 选项卡当前的索引
list: [
{
id: 1,
title: "apple",
content: "我是一个苹果"
},
{
id: 2,
title: "orange",
content: "我是一个橙子"
},
{
id: 3,
title: "lemon",
content: "我是一个柠檬"
}
]
};
},
methods: {
toggle(index) {
// 在这里实现选项卡切换操作:本质就是操作类名
// 如何操作类名?就是通过currentIndex
this.currentIndex = index;
}
}
};
</script>
<style>
* {
padding: 0;
margin: 0;
}
ul {
overflow: hidden;
}
ul li {
box-sizing: border-box;
padding: 0;
float: left;
width: 100px;
height: 45px;
line-height: 45px;
list-style: none;
text-align: center;
cursor: pointer;
}
.active {
border-bottom: 1px solid pink;
}
.current {
width: 300px;
height: 300px;
text-align: center;
font-size: 30px;
line-height: 300px;
border: 1px solid red;
}
</style>
vue简易tab选项卡
最新推荐文章于 2022-07-05 08:34:57 发布