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查看html源文件
Nov 08 Javascript
JavaScript Event学习第八章 事件的顺序
Feb 07 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
基于JavaScript实现在新的tab页打开url
Aug 04 Javascript
学好js,这些js函数概念一定要知道【推荐】
Jan 19 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 Javascript
vue如何集成raphael.js中国地图的方法示例
Aug 15 Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
vue实现页面切换滑动效果
Jun 29 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 Javascript
vue实现自定义多选按钮
Jul 16 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 判断字符串中是否包含html标签
2014/02/17 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
2019/12/11 PHP
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
JavaScript 对象模型 执行模型
2010/10/15 Javascript
jquery 圆形旋转图片滚动切换效果
2011/01/19 Javascript
JavaScript入门之对象与JSON详解
2011/10/21 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
2013/08/30 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
jQuery蓝色风格滑动导航栏代码分享
2015/08/19 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
全面理解JavaScript中的继承(必看)
2016/06/16 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
layui表格数据重载
2019/07/27 Javascript
ES11屡试不爽的新特性,你用上了几个
2020/10/21 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
JavaScript实现手风琴效果
2021/02/18 Javascript
对django 模型 unique together的示例讲解
2019/08/06 Python
将python包发布到PyPI和制作whl文件方式
2019/12/25 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
Django视图、传参和forms验证操作
2020/07/15 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
html5 datalist标签使用示例(自动完成组件)
2014/05/04 HTML / CSS
如何理解transaction事务的概念
2015/05/27 面试题
大学生村官任职感言
2014/01/09 职场文书
《挑山工》的教学反思
2014/02/16 职场文书
前台文员职责范本
2014/03/07 职场文书
《社戏》教学反思
2016/02/22 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
Python中tkinter的用户登录管理的实现
2021/04/22 Python
Vue+Flask实现图片传输功能
2022/04/01 Vue.js
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技