element-ui循環(huán)顯示radio控件信息的方法

更新時間：2018年08月24日 11:48:57 作者：茶杯里有熊

今天小編就為大家分享一篇element-ui循環(huán)顯示radio控件信息的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

如下所示：

  <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 : "贈送"
   }
  ],

根據(jù)接收到的數(shù)據(jù)

currentLine.isGive

來決定顯示購買和贈送，如果不寫{{item.name}}那么默認(rèn)顯示的是radio所綁定的：lable的值，如果想要使不同的選項顯示，要在data中建一個json數(shù)據(jù)，結(jié)構(gòu)代碼中插入{{item.name}}來取代默認(rèn)的顯示值。

以上這篇element-ui循環(huán)顯示radio控件信息的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

基于vue的video播放器的實現(xiàn)示例
這篇文章主要介紹了基于vue的video播放器的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-02-02
vue實現(xiàn)多級菜單效果
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)多級菜單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-10-10
VUE使用draggable實現(xiàn)組件拖拽
這篇文章主要為大家詳細(xì)介紹了VUE使用draggable實現(xiàn)組件拖拽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
通過命令行創(chuàng)建vue項目的方法
這篇文章主要介紹了通過命令創(chuàng)建vue項目的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
Vue腳手架安裝時遇到的無法安裝問題詳解
開發(fā)中遇到bug是在正常不過了,而程序也基本都是bug堆里爬出來的,下面這篇文章主要給大家介紹了關(guān)于Vue腳手架安裝時遇到的無法安裝問題的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
vue 解決移動端彈出鍵盤導(dǎo)致頁面fixed布局錯亂的問題
今天小編就為大家分享一篇vue 解決移動端彈出鍵盤導(dǎo)致頁面fixed布局錯亂的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
Vue-cli3項目配置Vue.config.js實戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于Vue-cli3項目配置Vue.config.js的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2018-07-07
詳解vue3.0 的 Composition API 的一種使用方法
這篇文章主要介紹了vue3.0 的 Composition API 的一種使用方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-10-10
vue實現(xiàn)一個炫酷的日歷組件
公司業(yè)務(wù)新開了一個商家管理微信H5移動端項目，日歷控件是商家管理員查看通過日程來篩選獲取某日用戶的訂單等數(shù)據(jù)。下面小編給大家?guī)砹嘶趘ue實現(xiàn)一個炫酷的日歷組件，感興趣的朋友參考下吧
2018-10-10
vue?3.0使用element-plus按需導(dǎo)入方法以及報錯解決
Vue3是不能直接使用Element-ui了,需要換成Element-plus,下面這篇文章主要給大家介紹了關(guān)于vue?3.0使用element-plus按需導(dǎo)入方法以及報錯解決的相關(guān)資料,需要的朋友可以參考下
2024-02-02