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下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
Oct 31 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
原生js实现class的添加和删除简单代码
Jul 12 Javascript
Jquery调用iframe父页面中的元素及方法
Aug 23 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
JS插入排序简单理解与实现方法分析
Nov 25 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
vue实现数据控制视图的原理解析
Jan 07 Javascript
Vue3不支持Filters过滤器的问题
Sep 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
《心理测量者3》剧场版动画预告
2020/03/02 日漫
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
PHP curl使用实例
2015/07/02 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
jquery $.ajax入门应用一
2008/11/19 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
浅谈页面装载js及性能分析方法
2014/12/09 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
layer实现弹窗提交信息
2016/12/12 Javascript
Angularjs 依赖压缩及自定义过滤器写法
2017/02/04 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
express+mockjs实现模拟后台数据发送功能
2018/01/07 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
JS原型与继承操作示例
2019/05/09 Javascript
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
python 文件操作删除某行的实例
2017/09/04 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
简单了解python关系(比较)运算符
2019/07/08 Python
Django框架 querySet功能解析
2019/09/04 Python
python实现井字棋小游戏
2020/03/04 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
英国著名的小众美容品牌网站:Alyaka
2017/08/08 全球购物
中专毕业生自荐信
2013/11/16 职场文书
新闻编辑专业毕业自荐书范文
2014/02/05 职场文书
旅游管理毕业生自荐信范文
2014/03/19 职场文书
餐饮服务食品安全责任书
2014/07/25 职场文书
入党政审材料范文
2014/12/24 职场文书
青年教师个人总结
2015/02/11 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript
Win11应用商店打开闪退怎么解决? win11应用商店打不开的多种解决办法
2022/04/05 数码科技