vue如何实现tab栏点击高亮效果

tab栏实现点击高亮

之前面试的时候被问到过如何使用vue实现tab栏切换高亮，
今天自己写demo顺便记录一下

vue官方文档里有一个基础知识点叫做对象语法

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
//data如下
data: {
  isActive: true,
  hasError: false
}
//渲染结果为
<div class="static active"></div>

个人觉得类似三元表达式，如果值为true则给该元素添加上指定的class

实际代码如下

<template>
  <div>
    <!-- v-for循环渲染arr -->
    <!-- 把当前点击的name通过selected传给data里的active -->
    <!-- 判断如果active的值与当前点击的name相同 则给当前点击的div加上active样式 -->
    <div  id="box" 
          v-for="(item,index) in arr" 
          :key="index"
          @click = selected(item.name)
          :class="{active:active == item.name}"
          >
      {{item.name}}
    </div>
  </div>
</template>
<script>
export default {
  name: "index",
  data() {
    return {
      arr: [
        { name: "娃哈哈" },
        { name: "椰子汁" },
        { name: "柠檬茶" },
        { name: "可乐" },
        { name: "雪碧" }
      ],
      active: "娃哈哈"
    };
  },
  methods: {
    selected(name){
      this.active = name
      console.log(name)
    }
  }
};
</script>
<style>
.active {
  background-color: orange;
  color: white;
}
#box {
  width: 100px;
  height: 100px;
  margin: 10px;
  float: left;
  border: 1px solid #000;
}
</style>

我是前端萌新一枚，刚接触前端没多久，vue接触时间就更短了，
每天进步一点点！