image.png

// html
<div class="list">
    <div class="item" v-for="(item,index) in listData" :key="index" @click="selectItem(index);" :class="{'active':arrIndex.indexOf(index)>-1}" >{{item}}</div>
</div>

// js
data() {
    return {
         listData: ["路飛","卓洛","山治","羅賓","娜美","喬巴","布魯克","弗蘭基","烏索普"],
         arrIndex: []   // 選擇的項(xiàng)的索引數(shù)組
    }
},
methods: {
    selectItem(index){
         let arrIndex = this.arrIndex.indexOf(index);
        
         if(arrIndex>-1){   // 已選中,點(diǎn)擊取消
             this.arrIndex.splice(arrIndex,1);
         }else{  // 未選中,點(diǎn)擊選中
            this.arrIndex.push(index);
         }
    }
}

// css
.list {
   padding: 40px;
      .item {
          display: inline-block;
          height: 20px;
          line-height: 20px;
          padding: 0 .16rem;
          font-size: 10px;
          color: #97979f;
          border-radius: 20px;
          border: 1px solid #97979f;
          margin-right: 10px;
          margin-top: 10px;
          font-style: normal;
          &.active {
              border: 1px solid orange;
              color: orange;
          }
     }
}