下面是template代码:
<div class="home">
<ul>
<li
:class="index === activeIndex ? 'ac' : ''"
v-for="(item, index) in hList"
:key="item.id"
@click="tabs(index)"
>
{{ item.txt }}
</li>
</ul>
<div class="con">
<div
v-show="activeIndex === index"
v-for="(item, index) in cList"
:key="item.id"
>
{{ item.txt }}
</div>
</div>
</div>
然后是script的代码
import { defineComponent, reactive, ref } from "vue";
interface List {
id: number;
txt: string;
}
export default defineComponent({
name: "Home",
setup() {
let activeIndex = ref(0);
let hList: List[] = reactive([
{ id: 1, txt: "选项1" },
{ id: 2, txt: "选项2" },
{ id: 3, txt: "选项3" },
{ id: 4, txt: "选项4" },
]);
let cList: List[] = reactive([
{ id: 1, txt: "内容1" },
{ id: 2, txt: "内容2" },
{ id: 3, txt: "内容3" },
{ id: 4, txt: "内容4" },
]);
function tabs(index: number) {
activeIndex.value = index;
}
return {
hList,
cList,
activeIndex,
tabs,
};
},
});
最后是css代码:
body {
margin: 0;
}
.home {
margin: 0 auto;
border: 1px solid #000;
width: 800px;
height: 600px;
ul {
margin: 0;
padding: 0;
overflow: hidden;
height: 50px;
li {
list-style: none;
float: left;
width: 25%;
height: 50px;
text-align: center;
line-height: 50px;
background-color: pink;
cursor: pointer;
}
.ac {
background-color: tomato;
}
}
.con {
height: 550px;
div {
background-color: blueviolet;
height: 100%;
text-align: center;
line-height: 550px;
font-size: 80px;
color: wheat;
}
}
}