Vue项目中实现点击变色

在Vue开发中我们经常会遇到这样点击高亮的场景，今天我们就来实现一下这样的功能。

1. 首先准备要循环的数据

data() {
        return {
            arr1:[
                {title:"精选"},
                {title:"美食"},
                {title:"女装"},
                {title:"美妆"},
                {title:"居家用品"},
                {title:"鞋品"},
                {title:"数码家电"},
                {title:"男装"},
                {title:"内衣"},
                {title:"母婴"},
                {title:"家装家纺"},
            ],
            active:''
        }
    }

2. 定义点击高亮类名：

.active {
  color: #fff;
  border-bottom: 1px solid red;
 }

3. 动态添加数据，并动态增加active名。添加点击事件（点击时让active=name）

<div class="nav">
            <li class="nav_li" v-for="(v,i) in arr1" :key="i" :class="{active : active == v.title}" @click="selected(v.title)">{{v.title}}</li>
        </div>

5. 定义点击事件

methods: {
       selected(name){
            this.active = name;
        }
    }, 

这样就好了，希望能帮助到大家。