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 相关文章推荐
用js判断用户浏览器是否是XP SP2的IE6
Mar 08 Javascript
基于jquery的跨域调用文件
Nov 19 Javascript
js 删除数组的几种方法小结
Feb 21 Javascript
js中的如何定位固定层的位置
Jun 15 Javascript
jquery获取radio值实例
Oct 16 Javascript
浅谈javascript中的DOM方法
Jul 16 Javascript
常用的javascript设计模式
Jan 11 Javascript
JavaScript中Object值合并方法详解
Dec 22 Javascript
微信小程序网络请求封装示例
Jul 24 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
Sep 16 Javascript
vue简单封装axios插件和接口的统一管理操作示例
Feb 02 Javascript
js实现简单扫雷
Nov 27 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
为查询结果建立向后/向前按钮
2006/10/09 PHP
PHP+jQuery翻板抽奖功能实现
2015/10/19 PHP
PHP中list()函数用法实例简析
2016/01/08 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
js 操作select相关方法函数
2009/12/06 Javascript
jQuery学习基础知识小结
2010/11/25 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
javascript比较两个日期相差天数的方法
2015/07/23 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
JS实现unicode和UTF-8之间的互相转换互转
2017/07/05 Javascript
Vue computed计算属性的使用方法
2017/07/14 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
2019/08/16 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
python下如何让web元素的生成更简单的分析
2008/07/17 Python
Python实现二叉堆
2016/02/03 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
使用python无账号无限制获取企查查信息的实例代码
2020/04/17 Python
Python 私有属性和私有方法应用场景分析
2020/06/19 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
保安岗位职责
2014/02/21 职场文书
春节请假条
2014/04/11 职场文书
2014年入党积极分子学习三中全会思想汇报
2014/09/13 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
python中的plt.cm.Paired用法说明
2021/05/31 Python
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle
windows server2008 开启端口的实现方法
2022/06/25 Servers
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python