使用块级标签div,li等实现单选，全选--- # 主题列表：juejin, github, smartblue, cy

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <div id="app">
        <p>单选框</p>
        <ul>
            <li v-for="(item,index) in radioList" :key="index" :class="selectedNum==index?'active':''"
                @click="select(index)">{{item}}</li>
        </ul>

        <p>多选框</p>
        <ul>
            <li v-for="(item,index) in checkboxList" :key="item" :class="checkbox.includes(index)?'active':''"
                @click="check(index)">{{item}}</li>
        </ul>
        <button @click="letsGetThisFuckingCheck">{{isCheckAll?'取消全选':'选择全部'}}</button>
        <button @click="checkOpposite">反选</button>
        <button @click="clear">清空</button>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                selectedNum: "",
                radioList: ["某个元素", "某个元素", "某个元素", "某个元素", "某个元素"],
                checkbox: [],
                checkboxList: ["某个元素", "某个元素", "某个元素", "某个元素", "某个元素", "某个元素", "某个元素"],
            },
            computed: {
                //判断是否全部选中
                isCheckAll() {
                    if (this.checkbox.length == this.checkboxList.length) {
                        return true;
                    }
                    return false;
                }
            },
            methods: {
                //单选
                select(i) {
                    this.selectedNum = i;
                },
                //多选
                check(i) {
                    var idx = this.checkbox.indexOf(i);
                    //如果已经选中了，那就取消选中，如果没有，则选中
                    if (idx > -1) {
                        this.checkbox.splice(idx, 1);
                    } else {
                        this.checkbox.push(i);
                    }
                },

                letsGetThisFuckingCheck() {
                    if (this.isCheckAll) {
                        this.clearCheckbox();
                    } else {
                        this.checkAll()
                    }
                },
                //选中全部
                checkAll() {
                    var len = this.checkboxList.length;
                    this.checkbox = [];
                    for (var i = 0; i < len; i++) {
                        this.checkbox.push(i);
                    }
                },
                //清空选择
                clearCheckbox() {
                    this.checkbox = [];
                },
                clear() {
                    this.checkbox = [];
                },
                //反选
                checkOpposite() {
                    console.log(1)
                    var len = this.checkboxList.length;
                    var idx;
                    for (var i = 0; i < len; i++) {
                        idx = this.checkbox.indexOf(i)
                        //已经选中的删去，没选中的加进去
                        if (idx > -1) {
                            this.checkbox.splice(idx, 1);
                        } else {
                            this.checkbox.push(i);
                        }
                    }
                },
            },
            watch: {
                "checkedNames": function () {
                    if (this.checkedNames.length != this.checkedArr.length) {
                        this.checked = false
                    } else {
                        this.checked = true
                    }
                }
            }
        })
    </script>
</body>
<style>
    li {
        display: inline-block;
        font-size: 16px;
        padding: 5px;
        background-color: #e6e6e6;
        margin: 5px 10px;
        cursor: pointer;
    }

    .active {
        border: 2px solid red;
    }
</style>

</html>