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中的constructor
Jun 08 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
Vue2实现组件props双向绑定
Dec 02 Javascript
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
js中的 || 与 &amp;&amp; 运算符详解
May 24 Javascript
Vue组件系列开发之模态框
Apr 18 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 Javascript
webpack安装配置与常见使用过程详解(结合vue)
Jun 01 Javascript
如何使用gpu.js改善JavaScript的性能
Dec 01 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
几款免费开源的不用数据库的php的cms
2010/12/19 PHP
PHP页面中文乱码分析
2013/10/29 PHP
Php-Redis安装测试笔记
2015/03/05 PHP
开启PHP的伪静态模式
2015/12/31 PHP
Yii1.1中通过Sql查询进行的分页操作方法
2017/03/16 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
js split 的用法和定义 js split分割字符串成数组的实例代码
2012/05/13 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
2017/02/19 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
2017/08/29 jQuery
简单理解Vue中的nextTick方法
2018/01/30 Javascript
JS实现的简单tab切换功能完整示例
2019/06/20 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
2019/10/25 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
python中实现定制类的特殊方法总结
2014/09/28 Python
Python的SQLAlchemy框架使用入门
2015/04/29 Python
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
python random从集合中随机选择元素的方法
2019/01/23 Python
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
python 连续不等式语法糖实例
2020/04/15 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
详解Python中的路径问题
2020/09/02 Python
python 实现有道翻译功能
2021/02/26 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
大学生通用个人自我评价
2014/04/27 职场文书
计算机网络专业自荐信
2014/07/04 职场文书
人身损害赔偿协议书格式
2014/11/01 职场文书
2015年党员承诺书
2015/01/21 职场文书
事业单位个人总结
2015/02/12 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
员工工作心得体会
2019/05/07 职场文书