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 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
JavaScript中“基本类型”之争小结
Jan 03 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
Apr 24 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
Nov 30 Javascript
解决vue多个路由共用一个页面的问题
Mar 12 Javascript
js canvas实现红包照片效果
Aug 21 Javascript
关于JSON解析的实现过程解析
Oct 08 Javascript
使用vue-router切换页面时实现设置过渡动画
Oct 31 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 Javascript
vue框架中props的typescript用法详解
Feb 17 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
E路文章系统PHP
2006/12/11 PHP
PHP 字符串分割和比较
2009/10/06 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
php-beanstalkd消息队列类实例分享
2017/07/19 PHP
Thinkphp模板没有解析直接原样输出的解决方法
2014/10/31 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
jQuery获取多种input值的简单实现方法
2016/06/20 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
浅析如何利用JavaScript进行语音识别
2016/10/27 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
webpack4+react多页面架构的实现
2018/10/25 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
使用Python实现一个简单的项目监控
2015/03/31 Python
深入Python解释器理解Python中的字节码
2015/04/01 Python
python访问类中docstring注释的实现方法
2015/05/04 Python
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
python利用7z批量解压rar的实现
2019/08/07 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
便利店的创业计划书
2014/01/15 职场文书
清扬洗发水广告词
2014/03/14 职场文书
服务标语大全
2014/06/18 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
仓管员岗位职责
2015/02/03 职场文书
高校教师个人总结
2015/02/10 职场文书
2015年小学二年级班主任工作总结
2015/05/21 职场文书
元旦晚会开场白
2015/05/29 职场文书
入党介绍人考察意见
2015/06/01 职场文书
Python实现天气查询软件
2021/06/07 Python
Python装饰器的练习题
2021/11/23 Python