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中的几个运算符
Jun 29 Javascript
统计出现最多的字符次数的js代码
Dec 03 Javascript
Javascript无参数和有参数类继承问题解决方法
Mar 02 Javascript
js模仿java的Map集合详解
Jan 06 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
May 25 Javascript
Javascript简写条件语句(推荐)
Jun 12 Javascript
js实现textarea限制输入字数
Feb 13 Javascript
js 奇葩技巧之隐藏代码
Aug 11 Javascript
简化vuex的状态管理方案的方法
Jun 02 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
jQuery.parseJSON()函数详解
Feb 28 jQuery
解决layui中onchange失效以及form动态渲染失效的问题
Sep 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
php 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
php笔记之:php数组相关函数的使用
2013/04/26 PHP
phpstrom使用xdebug配置方法
2013/12/17 PHP
php备份数据库类分享
2015/04/14 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
Sample script that deletes a SQL Server database
2007/06/16 Javascript
js每次Title显示不同的名言
2008/09/25 Javascript
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
Node.Js中实现端口重用原理详解
2018/05/03 Javascript
Vue Router的懒加载路径的解决方法
2018/06/21 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
2018/07/18 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
2020/11/10 Javascript
python实现问号表达式(?)的方法
2013/11/27 Python
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
利用Python命令行传递实例化对象的方法
2016/11/02 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
Python中super函数用法实例分析
2019/03/18 Python
一些关于python 装饰器的个人理解
2020/08/31 Python
阿玛尼意大利官网:Armani意大利
2018/10/30 全球购物
new修饰符是起什么作用
2015/06/28 面试题
运动会加油口号
2014/06/07 职场文书
个人作风建设心得体会
2014/10/22 职场文书
2014年招生工作总结
2014/11/26 职场文书
入党现实表现材料
2014/12/23 职场文书
幼儿园母亲节活动总结
2015/02/10 职场文书
2016年感恩教师节活动总结
2016/04/01 职场文书
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS