Vue使用vant循环多选框并取值

原创已于 2023-12-21 12:02:49 修改 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2019-12-20 15:12:40 首次发布

Vant-ui 专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何使用Vue.js结合Vant组件库实现动态多选框功能，包括数据绑定、事件监听及多选结果的获取。通过具体代码实例，展示了如何在网页中创建动态的多选框组，并通过按钮触发事件来获取用户的选择结果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/index.css">
    <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
    <script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
    <script src="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/vant.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
    <div id="Vue">
        <div  v-for="item in listTwo">
            <p>{{item.title}}</p>
            <van-checkbox-group v-model="item.val" v-for="val in item.duoxuan">
                <van-checkbox :name="val.name">{{val.text}}</van-checkbox>
            </van-checkbox-group>
        </div>
        <button @click="qcdx">
            取出多选{{ttt}}
        </button>
    </div>
</body>
<script>
    new Vue({
        el:"#Vue",
        data:{
            ttt:'',
            result: [],
            listTwo:[
                {
                    title:"多选1",
                    val:[],
                    id:4,
                    duoxuan:[
                        {
                            name:"a",
                            text:'复选框 a'
                        },
                        {
                            name:"b",
                            text:'复选框 b'
                        },
                        {
                            name:"c",
                            text:'复选框 c'
                        }
                    ]
                },
                {
                    title:"多选2",
                    val:[],
                    id:5,
                    duoxuan:[
                        {
                            name:"a",
                            text:'复选框 a'
                        },
                        {
                            name:"b",
                            text:'复选框 b'
                        },
                        {
                            name:"c",
                            text:'复选框 c'
                        }
                    ]
                }
            ]
        },
        methods:{
            qcdx(){
                let aaa = {}
                for (let i in this.listTwo){
                    console.log(this.listTwo[i].id)
                    let asc = this.listTwo[i].id
                    aaa[asc]=this.listTwo[i].val.toString()
                   // aaa.push(this.listTwo[i].val.toString())
                }
                console.log(aaa)
            }
        },
        created(){

        }
    })


</script>
</html>