vue 实现多选

Posted 2021-11-10 duanzhenzhen

v-model

<template>
    <!--用户页面-选择关注-->
    <div class="follow">
        <h4>选择关注</h4>
        <p>请选择您感兴趣的分类，给您最精准的推荐</p>
        <div>
            <ul class="flexStart">
                <li v-for="(item,index) in followLists" :key="index">
                    <input type="checkbox" :id="item.id" :value="item.id" v-model="selectedIndex"/>
                    <label :for="item.id" class="choice-item">{{item.txt}}</label> 
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: ‘userFollow‘,
        data() {
            return {
                selectedIndex: [],
                followLists: [
                    {id: 0, txt: ‘入职体检‘},
                    {id: 1, txt: ‘入职体检‘},
                    {id: 2, txt: ‘入职体检‘},
                    {id: 3, txt: ‘入职体检‘},
                    {id: 4, txt: ‘入职体检‘}
                ]
            }
        }
    }
</script>

<style scoped>
    h4 {
        font-size: 18px;
    }
    .follow {
        padding: 30px 0 0 10px;
        float: left;
        width: 400px;
        color: #0c0c0c;
    }
    .follow h4 {
        color: #358ee7;
    }
    .follow p {
        margin-bottom: 12px;
    }
// 隐藏input
    .follow ul li input {
        display: none;
    }
// 设置lable样式
    .choice-item {
        float: left;
        width: 120px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        border-left: 6px solid #d6d6d6;
        background-color: #eaeaea;
        margin-bottom: 16px;
        margin-right: 10px;
        cursor: pointer;
    }
// 设置选中项label样式

    input:checked + .choice-item {
        color: #fff;
        border-left: 6px solid #0a69c7;
        background-color: #358ee7;
    }
</style>