vue单选，多选，多选的内容显示在页面可删除

vue做单选只能选一个

<template>
    <div class="list">
        <!-- 多行多列单选 -->
        <span>只能选一个</span>
        <div class="list-group" v-for="(item,index) in items">
            <div class="left">
                <p>{{item.sex}}</p>
            </div>
            <div class="right" >
                <div class="right-box" v-for="list in item.introduce" @click="check(item,list,index)">
                    <i class="iconfont" :class="checked == list.id?'icon-yuanyixuan':'icon-yuanweixuan'"></i>
                    <p >{{list.name}}</p>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
export default{
    name: 'list',
    data() {
        return {
            checked: '',
            items: [
                {
                    sex: '男爱豆',
                    introduce: [
                        {
                            name: '易烊千玺',
                            id: 1
                        },
                        {
                            name: '张一山',
                            id: 2
                        },
                        {
                            name: '朱亚文',
                            id: 3
                        }
                    ]
                },
                {
                    sex: '女爱豆',
                    introduce: [
                        {
                            name: '迪丽热巴',
                            id: 4
                        },
                        {
                            name: '杨紫',
                            id: 5
                        },
                        {
                            name: '郑爽',
                            id: 6
                        }
                    ]
                }
            ]

        }
    },
    methods: {
        check(item,list,index) {
            this.checked = list.id;
        }
    }
}

</script>
<style lang="less">
.list {
    span {
        display: inline-block;
        width: 400px;
        text-align: center;
        margin-bottom: 10px;
    }
    .list-group {
        width: 400px;
        height: 50px;
        .left {
            float: left;
            width: 100px;
        }
        .right {
            float: right;
            width: 300px;
            .right-box {
                display: inline-block;
                width: 100px;
                p {
                    display: inline-block;
                }
                .icon-yuanyixuan {
                    color: red;
                }
            }
        }
    }
}
</style>

每行可以选一个

<div class="list">
    <!-- 多行多列单选 -->
    <span>每行可以选一个</span>
    <div class="list-group" v-for="(item,index) in items">
        <div class="left">
            <p>{{item.sex}}</p>
        </div>
        <div class="right" >
            <div class="right-box" v-for="(list,index) in item.introduce" @click="check(item,list,index)">
                <i class="iconfont" :class="item.isChecked == index ?'icon-yuanyixuan':'icon-yuanweixuan'"></i>
                <p >{{list.name}}</p>
            </div>
        </div>
    </div>
</div>

js

export default{
    name: 'list',
    data() {
        return {
            checked: '',
            items: [
                {
                    sex: '男爱豆',
                    isChecked: 0,
                    introduce: [
                        {
                            name: '易烊千玺',
                        },
                        {
                            name: '张一山',
                        },
                        {
                            name: '朱亚文',
                        }
                    ]
                },
                {
                    sex: '女爱豆',
                    isChecked: 1,
                    introduce: [
                        {
                            name: '迪丽热巴',
                        },
                        {
                            name: '杨紫',
                        },
                        {
                            name: '郑爽',
                        }
                    ]
                }
            ]

        }
    },
    methods: {
        check(item,list,index) {
            item.isChecked = index;
        }
    }
}

vue多选

<div class="list">
    <span>终于可以多选了</span>
    <div class="list-group" v-for="(item,index) in items">
        <div class="left">
            <p>{{item.sex}}</p>
        </div>
        <div class="right" >
            <div class="right-box" v-for="(list,index) in item.introduce" @click="check(item,list,index)">
                <i class="iconfont" :class="item.isChecked.indexOf(index) != -1 ?'icon-yuanyixuan':'icon-yuanweixuan'"></i>
                <p >{{list.name}}</p>
            </div>
        </div>
    </div>

</div>

js

export default{
    name: 'list',
    data() {
        return {
            checked: '',
            items: [
                {
                    sex: '男爱豆',
                    isChecked: [0],
                    introduce: [
                        {
                            name: '易烊千玺'
                        },
                        {
                            name: '张一山'
                        },
                        {
                            name: '朱亚文'
                        }
                    ]
                },
                {
                    sex: '女爱豆',
                    isChecked: [0],
                    introduce: [
                        {
                            name: '迪丽热巴'
                        },
                        {
                            name: '杨紫'
                        },
                        {
                            name: '郑爽'
                        }
                    ]
                }
            ]

        }
    },
    methods: {
        check(item,list,index) {
            var tmpIndex = item.isChecked.indexOf(index);
            // -1就是选中状态
            if(tmpIndex != -1){
                item.isChecked.splice(tmpIndex,1);
            }else {
                item.isChecked.push(index);
            }
        }
    }
}

vue多选框，实现添加和删除功能

<div class="list">
    <span>可添加删除</span>
    <div class="list-group" v-for="(item,index) in items">
        <div class="left">
            <p>{{item.sex}}</p>
        </div>
        <div class="right" >
            <div class="right-box" v-for="(list,index) in item.introduce" @click="check(item,list,index)">
                <i class="iconfont" :class="choose.indexOf(list.name) != -1 ?'icon-yuanyixuan':'icon-yuanweixuan'"></i>
                <p >{{list.name}}</p>
            </div>
        </div>
    </div>
    <div class="list-group">
        <div class="left">
            <p>你的选择是</p>
        </div>
        <div class="right">
            ({{choose.join(',')}})
        </div>
    </div>

</div>

js

export default{
    name: 'list',
    data() {
        return {
            items: [
                {
                    sex: '男爱豆',
                    introduce: [
                        {
                            name: '易烊千玺'
                        },
                        {
                            name: '张一山'
                        },
                        {
                            name: '朱亚文'
                        }
                    ]
                },
                {
                    sex: '女爱豆',
                    introduce: [
                        {
                            name: '迪丽热巴'
                        },
                        {
                            name: '杨紫'
                        },
                        {
                            name: '郑爽'
                        }
                    ]
                }
            ],
            choose: []

        }
    },
    methods: {
        check(item,list,index) {
            var tmpIndex = this.choose.indexOf(list.name);
            // -1就是选中状态
            if(tmpIndex != -1){
                this.choose.splice(tmpIndex,1)
            }else {
                this.choose.push(list.name);
            }
        }
    }
}

转载于:https://www.cnblogs.com/DCL1314/p/10109923.html