需求:多个标签切换改变颜色 

<span v-for="(list,index) in randOptions" class="seach-all" :class="{seachchange:changeblue==index}"
              @click="changeColor(index,list.text)">{{list.text}}</span>

 

.seach-all {
    border-right: 1px solid #ffffff;
    display: inline-block;
    width: 4rem;
    height: 2rem;
    text-align: center;
    line-height: 2rem;
    font-family: ArialMT;
    font-size: 12px;
    color: #ffffff;
    background-color: #dbe3eb;
  }

  .seach-all:last-child {
    border-right: none;
  }

 

.seachchange {
    background-color: #006cff;
  }
 changeColor(index, text) {
        this.changeblue = index;
}

效果图

Logo

前往低代码交流专区

更多推荐