vue for循环li 怎么做多选，点击只是切换子集的class，不影响其他li

Posted 2023-04-02

参考技术A 用场景：在进行多选的时候一般默认显示第一个。
实现方法：纯vue实现
例子：<span v-for="(one,index) in site"><input type="checkbox" :checked="index == 0" style="vertical-align: middle;"><label>one.name</label></span>
//:checked="index == 0"为索引为0的，即为第一个复选框添加属性。
拓展：默认被选中的复选框，只需要index指定即可。

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

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

　　

 

如图效果