方式一：li列表是一个数组

<li v-for=“(item,index) in list” :key="index"  @click="changeLi(item,index)" :class="listSelect.indexOf(item) = -1? 'select' : ' ' ">

.select{
    background-color: rgba(123, 456, 789, 0.1);
    width: 123px;
    height: 45px;
    line-height: 45px;
    color: #123456;
    border: 1px solid #123456;
}

data(){
  return{ 
    list : ['苹果','草莓','橙子','香蕉','西瓜']
    listSelect:[] //设置第二个数组存选中的元素
    select: -1 //设置选中状态
    selectItem ：[]
  }
}
methods:{
  changeLi(item,index){
      this.selectItem = item
      let id = this.listSelect.indexOf(this.selectItem)
      if(id == -1){ //新数组中没有这个元素，点击的时候修改样式，并将元素添加进去
          this.listSelect.push(this.slelectItem)
          this.select = index
      }else{//新数组中有这个元素，点击的时候选中样式消失，元素推出
          this.listSelect.pop(this.slelectItem)
          this.select = -1
       }
   }
}

方法二：li是一个对象

<li v-for=“(item,index) in list” :key="index"  @click="changeLi(item)" :class="item.select ? 'select' : ' ' ">

.select{
    background-color: rgba(123, 456, 789, 0.1);
    width: 123px;
    height: 45px;
    line-height: 45px;
    color: #123456;
    border: 1px solid #123456;
}

data(){
  return{
    list：[
       { name: '苹果', select: false },
       { name: '草莓', select: false },
       { name: '橙子', select: false },
       { name: '香蕉', select: false },
       { name: '西瓜', select: false }
   ]
  }
}
methods:{
  changeLi(item){
      if (!item.select) {
        item.select = true;
      } else {
        item.select = false;
      }
   }