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 input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
javascript利用初始化数据装配模版的实现代码
Nov 17 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
Oct 12 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
Feb 04 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
创建简单的node服务器实例(分享)
Jun 23 Javascript
js前端导出Excel的方法
Nov 01 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
详解微信小程序的 request 封装示例
Aug 21 Javascript
Vue创建头部组件示例代码详解
Oct 23 Javascript
如何使用vuex实现兄弟组件通信
Nov 02 Javascript
将RGB值转换为灰度值的简单算法
Oct 09 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 类商品秒杀计时实现代码
2010/05/05 PHP
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
PHP执行SQL文件并将SQL文件导入到数据库
2015/09/17 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
Yii框架实现记录日志到自定义文件的方法
2017/05/23 PHP
Yii2框架redis基本应用示例
2018/07/13 PHP
深入解析PHP底层机制及相关原理
2020/12/11 PHP
Javascript - HTML的request类
2006/07/15 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
EsLint入门学习教程
2017/02/17 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
Angular网络请求的封装方法
2018/05/22 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
2018/12/07 Javascript
通过vue手动封装on、emit、off的代码详解
2019/05/29 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
[04:29]2016国际邀请赛中国区预选赛Ehome战队教练采访
2016/06/27 DOTA
[01:03:13]VG vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python深入学习之特殊方法与多范式
2014/08/31 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
解决Numpy中sum函数求和结果维度的问题
2019/12/06 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
Stuarts London美国/加拿大:世界领先的独立男装零售商之一
2019/03/18 全球购物
网络技术支持面试题
2013/04/22 面试题
申报职称专业技术个人的自我评价
2013/12/12 职场文书
生日邀请函范文
2014/01/13 职场文书
数学教育专业求职信
2014/07/22 职场文书
中学生爱国演讲稿
2014/09/05 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
关于公司年会的开幕词
2016/03/04 职场文书
ztree+ajax实现文件树下载功能
2021/05/18 Javascript
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python
Python内置数据结构列表与元组示例详解
2021/08/04 Python