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>
相关推荐
蜉蝣之翼❉1 分钟前
games101 hw1
笔记·图形渲染
码小文2 小时前
MCU、MPU、GPU、Soc、DSP、FPGA、CPLD……它们到底是什么?
笔记·单片机·嵌入式硬件·学习·ic常识
摆烂z2 小时前
机器学习-黑马笔记
人工智能·笔记·机器学习
汇能感知3 小时前
光谱相机叶绿素荧光成像技术的原理
经验分享·笔记·科技
饭碗、碗碗香3 小时前
【开发常用命令】:docker常用命令
linux·运维·笔记·学习·docker·容器
一直游到海水变蓝丿3 小时前
el-select下拉框 添加 el-checkbox 多选框
前端·javascript·vue.js
罗政3 小时前
基于 SpringBoot + Vue 在线点餐系统(前后端分离)
vue.js·spring boot·后端
阿奇__4 小时前
element 跨页选中,回显el-table选中数据
前端·vue.js·elementui
努力往上爬de蜗牛4 小时前
vue3 daterange正则踩坑
javascript·vue.js·elementui
小宋10214 小时前
el-table的select回显问题
javascript·vue.js·elementui