效果图
代码
循环多个标签,点击标签变色,再点击取消,可以同时点击多个,
点击可添加背景色,添加可以添加样式
第一种
接口返回的数据没有状态值
!<template>
<div class="main">
<div class="sec">
<div v-show="item.sportName" v-for="(item,index) in list" :key="index"
@click="btnclick(item.sportId,item.sportName)">
<span :class="{active:spanIndex.indexOf(item.sportId)>-1}">{
{
item.sportName}}</span>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
spanIndex:[],
list: [
{
"userId": 152710,
"sportId": 24,
"sportName": "羽毛球",
"type": 0
},
{
"userId": 152710,
"sportId": 58,
"sportName": "轮滑",
"type": 0
},
{
"userId": 152710,
"sportId": 21,
"sportName": "棋牌",
"type": 0
},
{
"userId": 152710,
"sportId": 42,
"sportName": "壁球",
"type": 0
},
{
"userId": 152710,
"sportId": 22,
"sportName": "网球",
"type": 0
},
{
"userId": 152710,
"sportId": 33,
"sportName": "嗒嗒球",
"type": 0
},
{
"userId": 152710,
"sportId": 46,
"sportName": "球拍租借",
"type": 0
},
{
"userId": 152710,
"sportId": 56,
"sportName": "游泳私教",
"type": 0
},
{
"userId": 152710,
"sportId": 54,
"sportName": "观赛",
"type": 0
},
{
"userId": 152710,
"sportId": 26,
"sportName": "健身房",
"type": 0
},
{
"userId": 152710,
"sportId": 27,
"sportName": "少儿运动",
"type": 0
},
{
"userId": 152710,
"sportId": 29,
"sportName": "蹦床",
"type": 0
},
{
"userId": 152710,
"sportId": 39,
"sportName": "击剑私教课",
"type": 0
},
{
"userId": 152710,
"sportId": 47,
"sportName": "免费跑道",
"type": 0
},
{
"userId": 152710,
"sportId": 52,
"sportName": "跆拳道",
"type": 0
},
{
"userId": 152710,
"sportId": 19,
"sportName": "保龄球",
"type": 0
},
{
"userId": 152710,
"sportId": 41,
"sportName": "运动星球",
"type": 0
},
{
"userId": 152710,
"sportId": 57