Result:
as shown below
Example:
<template>
<div class="contain">
<div class="tab">
<div
class="tab-title"
v-for="(item, index) in foodList"
:key="index"
@click="btnClick(index)"
>
<div :class="['tab-item', activeIndex === index ? 'change' : '']">
{
{ item.name }}
</div>
</div>
</div>
<div class="main">
<div class="sub-main" v-for="(item, index) in subFoodList" :key="index">
<div class="sub-item">
{
{ item.name }}
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
// 假设后端返回的数组对象
foodList: [
{
name: "肉类",
children: [
{
name: "牛肉",
},
{
name: "羊肉",
},
{
name: "猪肉",
},
{
name: "鸡肉",
},
],
},
{
name: "海鲜",
children: [
{
name: "鲍鱼",
},
{
name: "龙虾",
},
{
name: "大闸蟹",
},
{
name: "花螺",
},
],
},
{
name: "菜类",
children: [
{
name: "菠菜",
},
{
name: "冬瓜",
},
{
name: "黄瓜",
},
{
name: "青瓜",
},
],
},
{
name: "水果",
children: [
{
name: "苹果",
},
{
name: "香蕉",
},
{
name: "菠萝",
},
{
name: "西瓜",
},
],
},
],
// 二级内容
subFoodList: [],
// 默认索引 0
activeIndex: 0,
};
},
methods: {
btnClick(index) {
console.log("ok");
this.activeIndex = index;
this.subFoodList = this.foodList[index].children;
},
},
created() {
this.subFoodList = this.foodList[this.activeIndex].children;
},
};
</script>
<style lang="scss" scoped>
.contain {
display: flex;
justify-content: center;
background-color: antiquewhite;
flex-direction: column;
}
.tab {
display: flex;
justify-content: center;
margin: 10px;
}
.tab-item {
margin: 10px;
}
.main {
display: flex;
justify-content: center;
background-color: beige;
}
.sub-main {
margin: 10px;
}
.change {
background-color: red;
}
</style>