vue列表单选 取消

效果示意图 image.png

可全不选，可单选

 <ul class="Flex">
      <li
        v-for="(item,index) in linst"
        :key="index"
        :class="selectedNum==index?'active':''"
        @click="select(index)"
      >{{item}}</li>
    </ul>

   linst: ["1", "2", "3", "4"],
   selected: "", //单选
   checkbox: [],
   selectedNum: 0, //默认选中项
  select(i) {
      if (this.selectedNum === i) {
        this.selectedNum = -1; //取消选中
      } else {
        this.selectedNum = i;
      }

样式设置

.Flex {
  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
}
ul > li {
  line-height: 40px;
  padding: 0 20px;
  border: beige solid 1px;
  margin-left: 10px;
}
.active {
  background: #4990ce;
  border: #4990ce;
  color: #fff;
}