vue 点击切换动态修改Class变化,实现当前样式改变（点击选中高亮）

效果：默认显示第一个

代码：我这里是动态生成的5个小方块

    <div class="gdw-num-box-inner" v-for="item in 5" :key="item">
            <span class="num-s" :class="isChecked==item?'check-num':'num-s'" @click="getNum(item)" ref="gdwNum"></span>
          </div>

  data() {
    return {
      isChecked: 1,
  },

  getNum(item) {
      console.log(item)
      this.isChecked = item
      }

.gdw-num-box {
  position: absolute;
  width: 8vw;
  height: 1rem;
  top: 4vh;
  right: 2vw;
  cursor: pointer;
  /*background-color: green;*/
}
.num-s{
  width: 1rem;
  height: 1rem;
  color: #24afab;
  margin-left: 0.5rem;
  float: left;
  background-color: #fff;
}
.check-num {
  width: 1rem;
  height: 1rem;
  box-shadow: 0 0 1rem #fff;
  background-color: #31E5F5;
}