Vue实现对点击的列表＜li＞添加class样例 不想默认第一个添加

<li v-for="(item,index) in schoolList1" :key="index" :class="{ active:index == current }" @click="checked(index)">
            {{ item.name }}
          </li>

data(){
return{
current:false,
}
}
methods: {
    //点击颜色改变
    checked(index){
      this.current=index
    }
}

.active{
  color:red !important;
}

这种方式写出来第一个li是直接显示颜色的，但是我不想让它显示，我只想点击的时候才会显示颜色，有什么更好的办法呢？

// 需要写成三个=号，JS中false == 0结果是true
:class="{ active:index === current }" 

标签里的东西改成这样

<li
    v-for="(item,index) in schoolList1"
    :key="index"
    :class="{ active: item.check }"
    @click="checked(item)"
>
  {{ item.name }}
</li>

checked方法改成这个

methods: {
    //点击颜色改变
    checked(item){
      item.check = item.check ? false : true
    }
}

current默认为null

data(){
return{
current:null,
}
}

用全等于试试 ===