vue实现点击高亮效果_vue实现tab栏点击高亮效果

本文实例为大家分享了tab栏实现点击高亮，供大家参考，具体内容如下

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

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

class="static"

v-bind:class="{ active: isActive, 'text-danger': hasError }"

>

//data如下

data: {

isActive: true,

hasError: false

}

//渲染结果为

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

实际代码如下

v-for="(item,index) in arr"

:key="index"

@click = selected(item.name)

:class="{active:active == item.name}"

>

{ {item.name}}

export default {

name: "index",

data() {

return {

arr