Vue实现元素选中高亮效果

<template>
  <div class="dtwh">
    <!-- tabs标签栏 -->
    <div class="title">
      <div
        v-for="(item, index) in titlelist"
        :key="index"
        :class="{ active: currentItem === index }"
        @click="handleClick(index, item.path)"
        style="cursor: pointer"
      >
        {{ item.title }}
      </div>
    </div>
    <!-- content -->
    <div><router-view></router-view></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      titlelist: [
        { title: '档案1', path: '/ceshi/da1' },
        { title: '档案2', path: '/ceshi/da2' },
        { title: '档案3', path: '/ceshi/da3' },
      ],
      currentItem: 0,
    }
  },
  methods: {
    handleClick(index, path) {
      this.currentItem = index
      this.$router.push(path)
    },
  },
}
</script>

<style scoped>
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.active {
  color: red;
}
</style>