vue.js循环radio

本文分享了使用Element UI中el-radio组件进行循环展示的方法及其实现细节,包括具体代码示例和所需的数据格式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近在做一个组件联动的,需要循环展示el-radio,花了很多时间现在记录一下,也给遇到类似问题的小伙伴一个参考

 <el-radio-group v-model="radioArray[item.name]" @change="handleRadioChanges">
     <el-radio v-for="opt in options"  :key="opt.label" :label="String(opt.label)"> 
        {{opt.value}}
     </el-radio>
 </el-radio-group>

效果:

数据格式:

options: [ {label:"1",value:"只读"}, {label:"2",value:"隐藏"} ],
radioArray:{"c_name":"1","c_email":"2","c_status","1"}

 

使用Vue.js框架构建一个校园学生网上选宿舍的用户界面可以分为几个步骤。以下是一个简单的示例,展示了如何使用Vue.js创建这样一个界面。首先,你需要确保已经在项目中引入了Vue.js。 1. 创建一个Vue实例,并定义数据模型,这个模型将包含学生信息和宿舍选项。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>校园学生网上选宿舍</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> </head> <body> <div id="app"> <h2>学生信息</h2> <form @submit.prevent="submitForm"> <label for="name">姓名:</label> <input type="text" id="name" v-model="student.name"><br> <label for="studentId">学号:</label> <input type="text" id="studentId" v-model="student.studentId"><br> <h2>宿舍选项</h2> <div v-for="(dormitory, index) in dormitories" :key="index" class="dormitory"> <input type="radio" :id="'dormitory' + index" v-model="student.selectedDormitory" :value="dormitory.name"> <label :for="'dormitory' + index"}>{{ dormitory.name }} - {{ dormitory.details }}</label><br> </div> <button type="submit">提交选宿</button> </form> </div> <script> new Vue({ el: '#app', data: { student: { name: '', studentId: '', selectedDormitory: '' }, dormitories: [ { name: '宿舍A', details: '2人间,靠近教学楼' }, { name: '宿舍B', details: '4人间,设施齐全' }, // 更多宿舍选项... ] }, methods: { submitForm() { // 处理表单提交逻辑 console.log('选宿信息:', this.student); } } }); </script> </body> </html> ``` 2. 在`<script>`标签内,我们定义了Vue实例,其中包含了学生信息的数据对象和宿舍的选项列表。我们使用`v-model`指令创建了双向数据绑定,这样用户界面上的更改会实时反映到数据模型上,反之亦然。 3. 使用`v-for`指令循环渲染每个宿舍选项,用户可以选择他们喜欢的宿舍。 4. 添加了一个表单提交按钮,并使用`@submit.prevent`来阻止表单的默认提交行为,然后调用`submitForm`方法处理表单提交。 请注意,这个示例仅仅是一个界面的雏形,实际的表单处理逻辑需要根据后端API来实现。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值