vue 多个标签切换变色

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

<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;
}

效果图

猜你喜欢

转载自blog.csdn.net/xuerwang/article/details/84325462
今日推荐