uniapp顶部导航栏文字点击变化

点击到热门和动态两个标签时字体会放大和出现下划线 然后搜索框下面的内容也会根据当前选中的标签进行来回切换 来个前辈讲一下要怎么做吧 教我一下

动态绑定class名

<template>
  <view class='tab'>
    <view class='item' :class='{active: index == 1}' @click='handleChange(1)'>热门</view>
    <view class='item' :class='{active: index == 2}' @click='handleChange(2)'>附近</view>
   <view class='item' :class='{active: index == 3}' @click='handleChange(3)'>热门</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
         index: 1
      }
    },
    methods: {
        handleChange(index) {
          this.index = index;
      }
    }
  }
</script>

<style>
  .tab {
      xxx: xxx;
  }

  .tab .item {
    xxx: xxx;
  }

  .tab .item.active {
    xxx:xxx
  }
</style>

点击的时候改变他的样式不就ok了