vue 循环多个标签，点击标签变色，再点击取消，可以同时点击多个

小阳生煎

已于 2022-08-11 16:31:00 修改

阅读量1k

点赞数

分类专栏： # Vue2 文章标签： vue.js javascript 前端

于 2022-07-25 09:17:16 首次发布

本文链接：https://blog.csdn.net/m0_53912016/article/details/125940245

版权

效果图

请添加图片描述

代码

循环多个标签，点击标签变色，再点击取消，可以同时点击多个,
点击可添加背景色,添加可以添加样式

第一种

接口返回的数据没有状态值

!<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