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 通过模式匹配实现重载
Aug 12 Javascript
基于jQuery的获取标签名的代码
Jul 16 Javascript
仿百度输入框智能提示的js代码
Aug 22 Javascript
JS模拟键盘打字效果的方法
Aug 05 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
详解微信小程序开发之下拉刷新 上拉加载
Nov 24 Javascript
详解vue过滤器在v2.0版本用法
Jun 01 Javascript
JavaScript的六种继承方式(推荐)
Jun 26 Javascript
Vue SSR 组件加载问题
May 02 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
解决layUI的页面显示不全的问题
Sep 20 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语法(1)
2006/10/09 PHP
PHP采用curl模仿用户登陆新浪微博发微博的方法
2014/11/07 PHP
php实现的双色球算法示例
2017/06/20 PHP
PHP错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
JQuery从头学起第二讲
2010/07/04 Javascript
JS编程小常识很有用
2012/11/26 Javascript
javascript向flash swf文件传递参数值注意细节
2012/12/11 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
判断window.onload是否多次使用的方法
2014/09/21 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
jQuery Plupload上传插件的使用
2017/04/19 jQuery
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
vue等两个接口都返回结果再执行下一步的实例
2020/09/08 Javascript
快速入手Python字符编码
2016/08/03 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
keras 多gpu并行运行案例
2020/06/10 Python
windows支持哪个版本的python
2020/07/03 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
AmazeUI 列表的实现示例
2020/08/17 HTML / CSS
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
创建索引时需要注意的事项
2013/05/13 面试题
介绍一下except的用法和作用
2015/01/22 面试题
毕业生求职推荐信
2013/11/04 职场文书
开业庆典策划方案
2014/02/18 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书
基于Redis延迟队列的实现代码
2021/05/13 Redis
Java实现多线程聊天室
2021/06/26 Java/Android