Vue&elementui动态渲染Radio,Checkbox,笔记

html 复制代码
<div id="app">
    <el-card style="width: 300px">
        <el-form label-position="top" size="mini">
            <el-form-item label="标题">
                <el-input></el-input>
            </el-form-item>
            <el-form-item v-for="item in questions" :key="item.id" :label="item.label">
                <el-radio-group v-model="item.check">
                    <el-radio v-for="it in item.options" :key="'uni_'+item.id+'_'+it.value" :label="'uni_'+item.id+'_'+it.value">{{ it.key }}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-button type="primary" @click="submit">提交</el-button>
        </el-form>
    </el-card>
</div>
<script>
    let vue = new Vue({
        el: '#app',
        data: () => {
            return {
                form: {
                    radioGroup: ''
                },
                questions: [
                    {
                        label: '您的性别?', id: 1, options: [{key: '男', value: 1}, {key: '女', value: 0}]
                    },
                    {
                        label: '您的婚姻状况是?', id: 2, options: [{key: '未婚', value: 0}, {key: '已婚', value: 1}]
                    }
                ]
            }
        },
        methods: {
            submit() {
                console.log(this.questions)
            }
        }
    })
</script>
相关推荐
qq_283720052 小时前
Python Celery + FastAPI + Vue 全栈异步任务实战
vue.js·python·fastapi
吴声子夜歌4 小时前
Vue3——Vue实例与数据绑定
前端·javascript·vue.js
一 乐5 小时前
物流信息管理|基于springboot + vue物流信息管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·物流信息管理系统
孜孜不倦不忘初心7 小时前
Vue 项目结构与命名规范
vue.js·代码规范
Flittly7 小时前
【SpringAIAlibaba新手村系列】(16)调用百度 MCP 服务
java·笔记·spring·ai·springboot
瑶光守护者8 小时前
【一文读懂】OpenClaw系统架构分析:自主人工智能智能体的范式迁移与技术底座分析
人工智能·笔记·学习·系统架构·边缘计算·openclaw
账号已注销free8 小时前
Vue3项目中给组件命名的方式
vue.js
前端那点事8 小时前
VueUse 全面指南|Vue3组合式工具集实战
vue.js
前端那点事9 小时前
Vue3+Pinia实战完整版|从入门到精通,替代Vuex的状态管理首选
vue.js