vue3实现点击tabs切换并切换底部内容

这里循环的是tabs标签

const titleList = ref([
  {
    id: 1,
    name: '全部',
    children: [
      {
        id: 1,
        img: img1,
        name: '北京新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
    ]
  },
  {
    id: 2,
    name: '北京新世界百货商城',
    children: [
      {
        id: 1,
        img: img1,
        name: '北京新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
    ]
  },
])

      <ul>
        <li
          v-for="item in titleList"
          :class="titleActiveTabs == item.id ? 'activeTabsbg' : ''"
          :key="item.id"
          @click="titleTabs(item)"
        >
          {{ item.name }}
        </li>
      </ul>

---

这里循环的是底部内容

<ul>
      <li v-for="ite in childrenList" :key="ite.id">
        <img :src="ite.img" alt="" />
        <div class="li_bottom_box">
          <div class="li_top_box">
            <div class="left">{{ ite.name }}</div>
            <div class="right">
              <button>{{ ite.button1 }}</button>
              <button>{{ ite.button2 }}</button>
            </div>
          </div>
          <div class="li_bottom2_box">
            <p>{{ ite.area }} &nbsp; {{ ite.square }}</p>
          </div>
        </div>
      </li>
</ul>

这里是实现的思路 / 代码

import { ref } from 'vue'   
//这里写 ref(1) 是第一个标签默认显示高亮
const titleActiveTabs = ref(1)
const titleList = ref([
  {
    id: 1,
    name: '全部',
    children: [
      {
        id: 1,
        img: img1,
        name: '北京新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
    ]
  },
  {
    id: 2,
    name: '北京新世界百货商城',
    children: [
      {
        id: 1,
        img: img1,
        name: '北京新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
    ]
  },
])

//默认显示第一条数据的children
const childrenList=ref(titleList.value[0].children)

//点击标签栏 传递item.id和item.children
const titleTabs = (item) => {
  titleActiveTabs.value = item.id
  childrenList.value=item.children
}

点击tabs标签的高亮样式

.activeTabsbg {
  color: #fff !important;
  background: linear-gradient(124deg, #0d67fc 0%, #805eff 100%);
}

效果图

 

完整代码如下：

<template>
  <!-- title -->
  <div class="shop_big_box">
    <div style="width: 40%; height: 20%">
      <p class="title1">推荐综合体和商铺</p>
      <p class="line"></p>
      <p class="title2">Recommended Complexes And Shops</p>
    </div>
    <div class="shop_right">
      <ul>
        <li
          v-for="item in titleList"
          :class="titleActiveTabs == item.id ? 'activeTabsbg' : ''"
          :key="item.id"
          @click="titleTabs(item)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
  <!-- 全部 -->
  <div class="outBox">
    <ul>
      <li v-for="ite in childrenList" :key="ite.id">
        <img :src="ite.img" alt="" />
        <div class="li_bottom_box">
          <div class="li_top_box">
            <div class="left">{{ ite.name }}</div>
            <div class="right">
              <button>{{ ite.button1 }}</button>
              <button>{{ ite.button2 }}</button>
            </div>
          </div>
          <div class="li_bottom2_box">
            <p>{{ ite.area }} &nbsp; {{ ite.square }}</p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script setup>
import img1 from '@/assets/imghome/Maskgroup.png'
import img2 from '@/assets/imghome/Maskgroup(1).png'
import img3 from '@/assets/imghome/Maskgroup(2).png'
import img4 from '@/assets/imghome/Maskgroup(3).png'
import img5 from '@/assets/imghome/Maskgroup(4).png'
import img6 from '@/assets/imghome/Maskgroup(5).png'
import img7 from '@/assets/imghome/Maskgroup(6).png'
import img8 from '@/assets/imghome/Maskgroup(7).png'

import { ref } from 'vue'   
const titleActiveTabs = ref(1)
const titleList = ref([
  {
    id: 1,
    name: '全部',
    children: [
      {
        id: 1,
        img: img1,
        name: '北京新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 2,
        img: img2,
        name: '济南新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 3,
        img: img3,
        name: '广州新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 4,
        img: img4,
        name: '上海新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 5,
        img: img5,
        name: '深圳新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 6,
        img: img6,
        name: '福建新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 7,
        img: img7,
        name: '江苏新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 8,
        img: img8,
        name: '杭州新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      }
    ]
  },
  {
    id: 2,
    name: '北京新世界百货商城',
    children: [
      {
        id: 1,
        img: img1,
        name: '北京新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 2,
        img: img2,
        name: '北京新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 3,
        img: img3,
        name: '北京新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 4,
        img: img4,
        name: '北京新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 5,
        img: img5,
        name: '北京新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 6,
        img: img6,
        name: '北京新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 7,
        img: img7,
        name: '北京新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 8,
        img: img8,
        name: '北京新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      }
    ]
  },
  {
    id: 3,
    name: '济南万象城',
    children: [
      {
        id: 1,
        img: img1,
        name: '济南新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 2,
        img: img2,
        name: '济南新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 3,
        img: img3,
        name: '济南新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 4,
        img: img4,
        name: '济南新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 5,
        img: img5,
        name: '济南新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 6,
        img: img6,
        name: '济南新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 7,
        img: img7,
        name: '济南新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 8,
        img: img8,
        name: '济南新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      }
    ]
  },
  {
    id: 4,
    name: '广州奥特莱斯',
    children: [
      {
        id: 1,
        img: img1,
        name: '广州新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 2,
        img: img2,
        name: '广州新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 3,
        img: img3,
        name: '广州新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 4,
        img: img4,
        name: '广州新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 5,
        img: img5,
        name: '广州新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 6,
        img: img6,
        name: '广州新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 7,
        img: img7,
        name: '广州新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 8,
        img: img8,
        name: '广州新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      }
    ]
  },
  {
    id: 5,
    name: '上海万象城',
    children: [
      {
        id: 1,
        img: img1,
        name: '上海新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 2,
        img: img2,
        name: '上海新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 3,
        img: img3,
        name: '上海新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 4,
        img: img4,
        name: '上海新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 5,
        img: img5,
        name: '上海新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 6,
        img: img6,
        name: '上海新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 7,
        img: img7,
        name: '上海新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      },
      {
        id: 8,
        img: img8,
        name: '上海新世纪百货-3F-310',
        button1: '高流量',
        button2: '热门店铺',
        area: '面积',
        square: '100-200㎡'
      }
    ]
  }
])
const childrenList=ref(titleList.value[0].children)

const titleTabs = (item) => {
  titleActiveTabs.value = item.id
  childrenList.value=item.children
}

</script>

<style lang="scss" scoped>
.activeTabsbg {
  color: #fff !important;
  background: linear-gradient(124deg, #0d67fc 0%, #805eff 100%);
}
.shop_big_box {
  width: 100%;
  display: flex;
  .shop_right {
    width: 60%;
    height: 20%;
    ul {
      width: 100%;
      height: 30%;
      margin-top: 10%;
      display: flex;
      justify-content: space-between;
      li {
        width: 1.625rem;
        height: 0.375rem;
        cursor: pointer;
        border-radius: 0.25rem;
        font-size: 0.175rem;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: black;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 0.1rem;
      }
    }
  }
}
// title样式
.title1 {
  font-size: 0.45rem;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #000000;
  line-height: 1rem;
  position: relative;
}
.line {
  width: 0.75rem;
  height: 0.075rem;
  background: linear-gradient(124deg, #0d67fc 0%, #805eff 100%);
  position: relative;
}
.title2 {
  font-size: 0.3rem;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #000000;
  line-height: 1rem;
  position: relative;
  top: -0.125rem;
}

// 中心区域
.outBox {
  height: 80%;
  ul {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      width: 4.15rem;
      height: 4rem;
      img {
        width: 100%;
        height: 3.0625rem;
      }
      .li_bottom_box {
        width: 100%;
        height: 0.9375rem;
        .li_top_box {
          width: 100%;
          height: 60%;
          display: flex;
          align-items: center;
          .left {
            width: 55%;
            font-size: 0.2rem;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #333333;
          }
          .right {
            width: 45%;
            button {
              height: 0.275rem;
              background: linear-gradient(124deg, #dde8ff 0%, #eae7ff 100%);
              border-radius: 0.25rem;
              border: none;
              font-size: 0.15rem;
              font-family: Source Han Sans CN-Regular, Source Han Sans CN;
              font-weight: 400;
              color: #0d67fc;
              &:nth-child(1) {
                margin-right: 0.125rem;
              }
            }
          }
        }
        .li_bottom2_box {
          width: 100%;
          height: 40%;
          font-size: 0.175rem;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #333333;
        }
      }
    }
  }
}
</style>