element-ui循环显示radio控件信息的方法


Posted in Javascript onAugust 24, 2018

如下所示:

<el-form-item label="线路类型:" prop="isGive">
   <el-radio-group v-model="currentLine.isGive">
   <el-radio :label="item.id" :key="item.id" v-for="item in isGive" >{{item.name}}</el-radio>
   </el-radio-group>
  </el-form-item>
data () {
  return {
  merchantId: 0,
  centerDialogVisible: false,
  lineList: [],
  portOptions: [],
  isGive:[
   {
   id : "n",
   name : "购买"
   },
   {
   id : "y",
   name : "赠送"
   }
  ],

根据接收到的数据

currentLine.isGive

来决定显示购买和赠送,如果不写{{item.name}}那么默认显示的是radio所绑定的:lable的值,如果想要使不同的选项显示,要在data中建一个json数据,结构代码中插入{{item.name}}来取代默认的显示值。

以上这篇element-ui循环显示radio控件信息的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个JavaScript继承的实现
Oct 24 Javascript
一些实用的jQuery代码片段收集
Jul 12 Javascript
javascript创建和存储cookie示例
Jan 07 Javascript
js和css写一个可以自动隐藏的悬浮框
Mar 05 Javascript
详细分析JavaScript函数定义
Jul 16 Javascript
每天一篇javascript学习小结(属性定义方法)
Nov 19 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
Nov 26 Javascript
基于javascript实现简单计算器功能
Jan 03 Javascript
jQuery插件扩展操作入门示例
Jan 16 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
three.js加载obj模型的实例代码
Nov 10 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
Jan 26 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
Aug 24 #Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 #Javascript
AngularJS自定义表单验证功能实例详解
Aug 24 #Javascript
Vue源码解读之Component组件注册的实现
Aug 24 #Javascript
element-ui 关于获取select 的label值方法
Aug 24 #Javascript
微信小程序用户信息encryptedData详解
Aug 24 #Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 #Javascript
You might like
PHILIPS AE3805收音机的分析打磨
2021/03/02 无线电
CodeIgniter模板引擎使用实例
2014/07/15 PHP
php动态变量定义及使用
2015/06/10 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
php文件上传类的分享
2017/07/06 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
Javascript客户端将指定区域导出到Word、Excel的代码
2008/10/22 Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
JavaScript和CSS通过expression实现Table居中显示
2013/06/28 Javascript
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
微信小程序canvas写字板效果及实例
2017/06/15 Javascript
vue页面使用阿里oss上传功能的实例(二)
2017/08/09 Javascript
js实现Tab选项卡切换效果
2020/07/17 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
解决matplotlib库show()方法不显示图片的问题
2018/05/24 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
python随机生成库faker库api实例详解
2019/11/28 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
部队2014年终工作总结
2014/11/27 职场文书
小班教师个人总结
2015/02/05 职场文书
应届毕业生自荐信
2015/03/04 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
婚宴父亲致辞
2015/07/27 职场文书
《七月的天山》教学反思
2016/02/19 职场文书
javascript实现计算器功能详解流程
2021/11/01 Javascript