vue3实现tab栏动态绑定样式切换

<template>
  <div class="topNav">
    <div class="topleft">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-31liebiao"></use>
      </svg>
    </div>

    <div class="topContent">
      <span
        v-for="(item, index) in topNavData"
        :key="index"
        @click="goPage(index)"
        :class="this.select == index ? 'active' : ''"
        >{{ item.name }}</span
      >
    </div>
    <div class="topRight">
      <svg class="icon">
        <use xlink:href="#icon-sousuo"></use>
      </svg>
    </div>
  </div>
</template>

<script>
export default {
  name: "TopNav",
  componpents: {},
  data() {
    return {
      select: 0,
      topNavData: [
        { name: "首页" },
        { name: "我的" },
        { name: "发现" },
        { name: "云村" },
      ],
    };
  },
  methods: {
    goPage(index) {
      this.select = index;
      console.log(index);
      console.log(this.select);
    },
  },
};
</script>

<style lang="less" scoped>
.topNav {
  width: 100%;
  height: 1rem;
  padding: 0.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .topContent {
    width: 65%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    // align-items: center;
    font-size: 0.36rem;
    .active {
      font-weight: 900;
      color: rgb(185, 0, 0);
    }
  }
}
</style>