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>
相关推荐
大怪v5 小时前
超赞👍!优秀前端佬的电子布洛芬技术网站!
前端·javascript·vue.js
暗流者5 小时前
AAA 服务器与 RADIUS 协议笔记
运维·服务器·笔记
Ro Jace6 小时前
科研笔记:博士生手册
笔记
老华带你飞6 小时前
校园交友|基于SprinBoot+vue的校园交友网站(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·校园交友网站
#include>6 小时前
【Golang】有关垃圾收集器的笔记
笔记·golang
Qlittleboy7 小时前
手机、电脑屏幕的显示坏点检测和成像原理
经验分享·笔记
陪我一起学编程8 小时前
创建Vue项目的不同方式及项目规范化配置
前端·javascript·vue.js·git·elementui·axios·企业规范
GISer_Jing9 小时前
Vue Teleport 原理解析与React Portal、 Fragment 组件
前端·vue.js·react.js
Summer不秃9 小时前
uniapp 手写签名组件开发全攻略
前端·javascript·vue.js·微信小程序·小程序·html
NobodyDJ10 小时前
Vue3 响应式大对比:ref vs reactive,到底该怎么选?
前端·vue.js·面试