vue 自定义单选和多选组件

单选效果：

多选效果：

<template>

  <div>

    <ul>

      <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 scoped>

.checked-list{display:flex;

  li{margin-right:40px;

    &.active::after{display:block;content:'';clear:both;width:10px;height:10px;background:#f00}

  }

}

</style>

有用  |  无用 取消

猜你喜欢