element-ui循環(huán)顯示radio控件信息的方法
更新時(shí)間：2018年08月24日 11:48:57 作者：茶杯里有熊
今天小編就為大家分享一篇element-ui循環(huán)顯示radio控件信息的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
如下所示：
<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 : "贈(zèng)送"
}
],
根據(jù)接收到的數(shù)據(jù)
currentLine.isGive
來決定顯示購買和贈(zèng)送，如果不寫{{item.name}}那么默認(rèn)顯示的是radio所綁定的：lable的值，如果想要使不同的選項(xiàng)顯示，要在data中建一個(gè)json數(shù)據(jù)，結(jié)構(gòu)代碼中插入{{item.name}}來取代默認(rèn)的顯示值。
以上這篇element-ui循環(huán)顯示radio控件信息的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
基于vue的video播放器的實(shí)現(xiàn)示例
這篇文章主要介紹了基于vue的video播放器的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)多級(jí)菜單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
VUE使用draggable實(shí)現(xiàn)組件拖拽
這篇文章主要為大家詳細(xì)介紹了VUE使用draggable實(shí)現(xiàn)組件拖拽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
通過命令行創(chuàng)建vue項(xiàng)目的方法
這篇文章主要介紹了通過命令創(chuàng)建vue項(xiàng)目的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
開發(fā)中遇到bug是在正常不過了,而程序也基本都是bug堆里爬出來的,下面這篇文章主要給大家介紹了關(guān)于Vue腳手架安裝時(shí)遇到的無法安裝問題的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
vue 解決移動(dòng)端彈出鍵盤導(dǎo)致頁面fixed布局錯(cuò)亂的問題
今天小編就為大家分享一篇vue 解決移動(dòng)端彈出鍵盤導(dǎo)致頁面fixed布局錯(cuò)亂的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue-cli3項(xiàng)目配置Vue.config.js實(shí)戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于Vue-cli3項(xiàng)目配置Vue.config.js的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
詳解vue3.0 的 Composition API 的一種使用方法
這篇文章主要介紹了vue3.0 的 Composition API 的一種使用方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
公司業(yè)務(wù)新開了一個(gè)商家管理微信H5移動(dòng)端項(xiàng)目，日歷控件是商家管理員查看通過日程來篩選獲取某日用戶的訂單等數(shù)據(jù)。下面小編給大家?guī)砹嘶趘ue實(shí)現(xiàn)一個(gè)炫酷的日歷組件，感興趣的朋友參考下吧2018-10-10
vue?3.0使用element-plus按需導(dǎo)入方法以及報(bào)錯(cuò)解決
Vue3是不能直接使用Element-ui了,需要換成Element-plus,下面這篇文章主要給大家介紹了關(guān)于vue?3.0使用element-plus按需導(dǎo)入方法以及報(bào)錯(cuò)解決的相關(guān)資料,需要的朋友可以參考下2024-02-02