vue 用checkbox 做多选，带选中样式

Posted 2020-12-05 xiangsj

<dl v-for="(item,index) in listData" :key="index">
                testName
                <label>
                    <input type="checkbox" v-model="checkedVal" :value="item">
                    <span>
                        <i class="iconfont no icon-hook-round"></i>
                        <i class="iconfont yes icon-hook-round"></i>
                    </span>
                </label>
            </dl>

// ...

data() {
        return {
            checkedVal: [],
            listData: [a,b,c,d]
        }
    },

//...


<style lang="less" scoped>
label {
                // border: 1px solid blue;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
　　　　　　　　　　// flex 布局可参考: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
                display: flex;
                align-items: center;
                justify-content: flex-end;
                padding-right: 15px;
                input {
                    display: none;
                    &+span {
                        >i {
                            font-size: 22px;
                            &.no {
                                color: #ddd;
                            }
                            &.yes {
                                color: #008cee;
                                display: none;
                            }
                        }
                    }
                    &:checked+span {
                        >i {
                            &.no {
                                display: none;
                            }
                            &.yes {
                                display: inline-block;
                            }
                        }
                    }
                }
            }
</style>

　　

 

如图效果