一、單選框Radio

單選框是iview的基本組件之一，主要用于一組可選項(xiàng)的單項(xiàng)選擇；

官方寫法：

<template>
    <RadioGroup v-model="animal">
        <Radio label="金斑蝶"></Radio>
        <Radio label="爪哇犀牛"></Radio>
        <Radio label="印度黑羚"></Radio>
    </RadioGroup>
</template>
<script>
    export default {
        data () {
            return {
                animal: '爪哇犀牛'
            }
        }
    }
</script>

實(shí)際操作中，iview和vue一起使用，我們通常傳入一個(gè)數(shù)組，通過(guò)v-for循環(huán)出來(lái)，并通過(guò)v-model實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，像這樣：

<template>
   <RadioGroup v-model="chosenOrder" @on-change="changeModel">
       <Radio v-for="item in workOrderList" :label="item.label" :key="item.value"></Radio>
   </RadioGroup>
</template>
<script>
export default {
  data() {
    return {
         workOrderList:[
          {
            label:'保修',
            value:'warranty'
          },{
            label:'售后整機(jī)保修',
            value:'aftersalewarranty'
          },{
            label:'軟件維修',
            value:'softrepair'
          },{
            label:'付費(fèi)維修',
            value:'payrepair'
          },
        ],
        chosenOrder:'',
        }
    }
}
</script>

在此時(shí)就會(huì)發(fā)現(xiàn)我們一般在前端展現(xiàn)的是label字段，為中文或者用戶可以理解的含義，而在后臺(tái)提交時(shí)需要提交value字段，但是按照這種寫法，當(dāng)我們選中時(shí)向后臺(tái)提交的依舊是label字段，如圖：

選中效果圖

后臺(tái)打印圖

如何才能既獲取label又能獲取value？

<template>
   <RadioGroup v-model="chosenOrder" @on-change="changeModel">
       <Radio v-for="item in workOrderList" :label="item.value" :key="item.value">
          <span>{{item.label}}</span>
       </Radio>
   </RadioGroup>
</template>

選中l(wèi)abel

獲取value