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 相关文章推荐
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 Javascript
JavaScript 特殊字符
Apr 05 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
Dec 16 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 Javascript
javascript观察者模式实现自动刷新效果
Sep 05 Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 Javascript
微信小程序自定义键盘 内部虚拟支付
Dec 20 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
javascript实现前端成语点击验证
Jun 24 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 在5.1.* 和5.2.*之间 PDO数据库操作中的不同之处小结
2012/03/07 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
msn上的tab功能Firefox对childNodes处理的一个BUG
2008/01/21 Javascript
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
2012/02/13 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
不使用jquery实现js打字效果示例分享
2014/01/19 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
JavaScript 实现下雪特效的示例代码
2020/09/09 Javascript
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python3.7中安装openCV库的方法
2018/07/11 Python
Python绘制热力图示例
2019/09/27 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
详解pandas赋值失败问题解决
2020/11/29 Python
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
Java基础知识面试要点
2016/07/29 面试题
负责人任命书范本
2014/06/04 职场文书
2014年中秋寄语
2014/08/11 职场文书
步步惊心观后感
2015/06/12 职场文书
初中物理教学反思
2016/02/19 职场文书
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python