第一种：
<style type="text/css">
.active {
background-color: blue;
}
</style>
<body>
<div v-for="(item, index) in list" :key="item.id" :class="flag == index ? 'active' : '' ">
{{item.name}}
</div>
</body>
<script>
expot default {
data () {
return {
flag: 0, //如果默认显示写0，默认不显示写-1
list: [
{name:"标签1",id:1,},
{name:"标签2",id:2,},
{name:"标签3",id:3,},
{name:"标签4",id:4,},
{name:"标签5",id:5,}]
}
}
}
</script>
第二种：
根据点击的tab来展示对应的内容，用到了vue的v-show和绑定class。
首先创建一个属性“shouColor” 用来判断显示哪一个tab页。
再为每一个连接注册点击事件：@click="shouColor = 1"分别让shouColor值改变。
最后为tab连接绑定class用来显示点击状态 :class = "{'blue':shouColor === 3}" 如果showDiv=3时就写入样式blue
<div class="btn_two">
<router-link to="/total">
<p class="gray" @click="showColor = 1" :class="{blue: showColor === 1}">全部</p>
</router-link>
<router-link to="/hire">
<p class="gray" @click="showColor = 2" :class="{blue: showColor === 2}">租借中</p>
</router-link>
<router-link to="/complete">
<p class="gray" @click="showColor = 3" :class="{blue: showColor === 3}">已完成</p>
</router-link>
<router-link to="/revoke">
<p class="gray" @click="showColor = 4" :class="{blue: showColor === 4}">已撤销</p>
</router-link>
</div>
