vue 自定义单选和多选组件

单选效果：

多选效果：

代码：

<template>
  <div class="custom">
    <ul class="checked-list">
      <li v-for="(item, index) in list" :key="index" :class="item.checked ? 'active' : ''" @click="selectChecked(item)">
        {{item.label}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      checked: [],
      list: [
        {
          label: '第一项',
          value: 1,
          checked: true
        },
        {
          label: '第二项',
          value: 2,
          checked: false
        },
        {
          label: '第三项',
          value: 3,
          checked: false
        },
        {
          label: '第四项',
          value: 4,
          checked: false
        }
      ]
    }
  },
  methods: {
    selectChecked (item) {
      item.checked = !item.checked // 注释本行，放开下面代码开启多选效果
      // const value = item.value
      // this.list.forEach(item => {
      //   item.value === value ? item.checked = true : item.checked = false
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
.checked-list{display:flex;
  li{margin-right:40px;
    &.active::after{display:block;content:'';clear:both;width:10px;height:10px;background:#f00}
  }
}
</style>