在vue中要实现vue tab点击切换高亮
首先：
核心实现思路：
1. 记录当前点击激活项index
2. 通过动态控制class类名 :class = "{active: index === currentIndex}"
效果类似：
<template>
<div
v-for="(item,index) in List"
:key="item.Id"
class="role-item"
:class="{active: index === activeIndex}"
<!-- active在data中记录当前index，通过下面的click将当前的index值，传递下去 -->
@click="swichTab(index)"
>
<div class="info">
<svg-icon :icon-class="index === activeIndex ? 'user-active' : 'user'" class="icon" />
{{ item.Name }}
</div>
</div>
</template><script>
export default {
name: 'Role',
data() {
return {
activeIndex: 0
}
},
methods: {
swichTab(idx) {
this.activeIndex = idx
}
}
}
</script>