vant循环单选框并获取值

最新推荐文章于 2025-11-16 07:34:06 发布

原创最新推荐文章于 2025-11-16 07:34:06 发布 · 6k 阅读

7 ·

CC 4.0 BY-SA版权

Vant-ui 专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何使用Vue.js和Vant UI组件库创建动态表单，具体实现包括利用v-for指令遍历数据列表，展示不同标题的段落，并通过Vant的Radio组件收集用户选择的数据。同时，展示了如何在点击按钮后获取所有被选中的值。

<!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 list">
            <p>{{item.title}}</p>
            <van-radio-group v-model="item.val" v-for="val in item.ridio">
                <van-radio :name="val.name">{{val.title}}</van-radio>
            </van-radio-group>
        </div>

        <button @click="huoqu">
            获取选中的值
        </button>
    </div>
</body>
<script>
    new Vue({
        el:"#Vue",
        data:{
            list:[
                {
                    title:"我是你爷爷",
                    val:[],
                    id:2,
                    ridio:[
                        {
                            name:"a",
                            title:'选项一'
                        },
                        {
                            name:"b",
                            title:'选项二'
                        }
                    ]
                },
                {
                    title:"我是你爸爸",
                    val:[],
                    id:3,
                    ridio:[
                        {
                            name:"a",
                            title:'选项一'
                        },
                        {
                            name:"b",
                            title:'选项二'
                        }
                    ]
                }
            ],
            radio: ''
        },
        methods:{
            huoqu(){
                let bbb = {}
                for (let i in this.list){
                    console.log(this.list[i].id)
                    let asc = this.list[i].id
                    bbb[asc]=this.list[i].val.toString()
                }
                console.log(bbb)
            }
        },
        created(){

        }
    })


</script>
</html>