在Vue开发中我们经常会遇到这样点击高亮的场景,今天我们就来实现一下这样的功能。
- 首先准备要循环的数据
data() {
return {
arr1:[
{title:"精选"},
{title:"美食"},
{title:"女装"},
{title:"美妆"},
{title:"居家用品"},
{title:"鞋品"},
{title:"数码家电"},
{title:"男装"},
{title:"内衣"},
{title:"母婴"},
{title:"家装家纺"},
],
active:''
}
}
- 定义点击高亮类名:
.active {
color: #fff;
border-bottom: 1px solid red;
}
- 动态添加数据,并动态增加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>
- 定义点击事件
methods: {
selected(name){
this.active = name;
}
},
这样就好了,希望能帮助到大家。