vue - 实现单选和多选

1、效果图：

2、具体实现过程：

<template>
  <div class="demo">
    <div :class="allChecked?'circle-full':'circle'" @click="radio('all')"></div>
    <div class="items" v-for="(item,index) in list" :key="index">
      <span :class="item.checked?'circle-full':'circle'" @click="radio('item',index)"></span>
      <span class="name">{{item.name}}</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          checked: false,
          name: "1"
        },
        {
          checked: false,
          name: "2"
        },
        {
          checked: false,
          name: "3"
        },
        {
          checked: false,
          name: "4"
        }
      ],
      allChecked: false,
      checkedList: []
    };
  },
  methods: {
    radio(type, index) {
      if (type === "item") {   //  单选
        this.list[index].checked = !this.list[index].checked;
        if (this.list[index].checked) {
          this.checkedList.push(this.list[index]);
        } else {
          this.checkedList.find((item, indexs) => {
            if (item == this.list[index]) {
              this.checkedList.splice(indexs, 1);
            }
          });
        }
        if (this.checkedList.length == this.list.length) {
          this.allChecked = true;
        } else {
          this.allChecked = false;
        }
      } else {  // 多选
        let checked = !this.allChecked;
        this.list.forEach(item => {
          item.checked = checked;
        });
        this.allChecked = checked;
        if (checked) {
          this.checkedList = [];
        }
      }
    }
  }
};
</script>
<style lang="less" scoped>
.demo {
  padding: 50px;
}

.items {
  padding-top: 20px;
  height: 20px;
  line-height: 20px;
  text-align: left;
  display: flex;
}
.circle-full {
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid #000;
  border-radius: 50%;
  background-color: red;
}
.circle {
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid #000;
  border-radius: 50%;
}

.name {
  padding-left: 20px;
  font-size: 20px;
}
</style>