最近在用 vue 写原生的样式，分享一下 tab 切换的代码。

以下是代码

<template>
  <div>
    <button>
      <router-link to="/">{{ msg }}</router-link>
    </button>
    <div>
      <div class="container">
        <div class="tabBar">
          <div
            :class="`tabBarItem ${
              listIndex === item.id ? ' tabBarItemIndex' : ''
            }`"
            @click="listIndex = item.id"
            v-for="(item, index) in tabBarItem"
            :key="index"
          >
            {{ item.title }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VueTestIndex',

  data () {
    return {
      msg: '我的音乐',
      listIndex: '1',
      tabBarItem: [
        {
          title: '首页',
          id: '1'
        },
        {
          title: '附近',
          id: '2'
        },
        {
          title: '发现',
          id: '3'
        },
        {
          title: '我的',
          id: '4'
        },
        {
          title: '首页',
          id: '5'
        }
      ]
    }
  },

  mounted () {},

  methods: {}
}
</script>

<style>
.tabBar {

  display: flex;
  margin: 0 auto;
  width: 800px;
  height: 50px;
  background-color: rgb(235, 230, 230);
}
.tabBarItem {
  position: relative;
  font-size: 25px;
  line-height: 50px;
  text-align: center;
  width: calc(100% / 5);
  /* color: red; */
}
.tabBarItemIndex {
  color: red;
}
 .tabBarItemIndex::after {
  position: absolute;
  content: "";
  width: 50px;
  height: 5px;
  background-color: red;
  left: 55px;
  bottom: 0;
}
</style>

可以直接复制哦