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>
相关推荐
艾小码几秒前
Vue组件通信不再难!这8种方式让你彻底搞懂父子兄弟传值
前端·javascript·vue.js
lcc1871 分钟前
Vue 数据代理
前端·javascript·vue.js
咖啡の猫1 小时前
Vue基本路由
前端·vue.js·状态模式
咖啡の猫1 小时前
Vue编程式路由导航
前端·javascript·vue.js
fs哆哆2 小时前
PDFsharp库的加密功能-学习笔记
笔记·学习
好望角雾眠9 小时前
第四阶段C#通讯开发-5:TCP
网络·笔记·网络协议·tcp/ip·c#
三品吉他手会点灯10 小时前
stm32f103学习笔记-16-RCC(第2节)-讲解系统时钟配置函数SetSysClockTo72()
笔记·stm32·单片机·嵌入式硬件·学习
一 乐10 小时前
点餐|智能点餐系统|基于java+ Springboot的动端的点餐系统小程序(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·小程序·论文
仙人掌_lz10 小时前
Kimi Linear 论文阅读笔记:第一次“线性注意力”全面胜过全注意力
论文阅读·笔记
wdfk_prog11 小时前
[Linux]学习笔记系列 -- [kernel]cpu
linux·笔记·学习