<el-radio-group v-model="radio">
? ?? ?<el-radio-button label="是"></el-radio-button>
? ??? ?<el-radio-button label="否"></el-radio-button>
</el-radio-group>

element-ui單選框可以綁定string/number/boolean類(lèi)型的數(shù)據(jù)

正確操作方法

如果需要綁定數(shù)值或者布爾類(lèi)型的值，需要在label前加上:，像這樣：

<el-radio-group v-model="radio">
? ?? ?<el-radio :label="true">是</el-radio>
?? ?<el-radio :label="false">否</el-radio>
</el-radio-group>

Element el-radio單選框詳解

1. 用途

單選框使用的場(chǎng)景非常普遍，用于列出多個(gè)選項(xiàng)，供用戶(hù)選擇其中一個(gè)。

注意Select選擇器也可以從多個(gè)選項(xiàng)中選擇一個(gè)，單選框的優(yōu)勢(shì)是可以在界面上同時(shí)顯示所有選項(xiàng)，缺點(diǎn)是選項(xiàng)多時(shí)占用空間大。

而選擇器優(yōu)勢(shì)是占用空間小(選項(xiàng)下拉選擇時(shí)才顯示)，缺點(diǎn)是必須要下拉時(shí)才能顯示所有選項(xiàng)。

2. 單選框

單選框HTML代碼如下：

	<el-radio v-model="radio1" label="male">男</el-radio>
    <el-radio v-model="radio1" label="female">女</el-radio>
    選中:{{radio1}}
    <el-divider></el-divider>

需要注意，漢字部分表示顯示內(nèi)容，label表示選中的值，v-model表示綁定的JS變量。JS部分代碼：

radio1: 'male',

效果如下：

3. 單選框樣式

單選框添加按鈕邊框樣式，通過(guò)border屬性實(shí)現(xiàn)。

HTML代碼：

	<el-radio v-model="radio2" label="basketball" border>籃球</el-radio>
    <el-radio v-model="radio2" label="football" border>足球</el-radio>
    選中:{{radio2}}
    <el-divider></el-divider>

JS代碼：

radio2: 'basketball',

效果如下：

4. 單選框組

可以使用el-radio-group標(biāo)簽將單選框包圍起來(lái)，這樣只需要設(shè)置一個(gè)v-model綁定變量即可。這樣的方式會(huì)將同一組的選項(xiàng)放在一個(gè)標(biāo)簽內(nèi)，使用起來(lái)更加符合習(xí)慣。示例：

HTML代碼：

    <el-radio-group v-model="radio3">
      <el-radio label="male">男</el-radio>
      <el-radio label="female">女</el-radio>
    </el-radio-group>
    選中:{{radio3}}
    <el-divider></el-divider>

JS代碼：

radio3: 'male',

效果：

4. 單選框組樣式

Element為單選框組也提供了按鈕樣式，看起來(lái)更加富有科技感。

HTML代碼：

	<el-radio-group v-model="radio4">
      <el-radio-button label="chinese">語(yǔ)文</el-radio-button>
      <el-radio-button label="math">數(shù)學(xué)</el-radio-button>
      <el-radio-button label="english">英語(yǔ)</el-radio-button>
    </el-radio-group>
    <el-divider></el-divider>

JS代碼：

radio4: 'chinese',

效果：

5. 尺寸調(diào)節(jié)

針對(duì)按鈕樣式的單選框和單選框組，可以使用size調(diào)整其大小，例如：

    <el-radio-group v-model="radio4" size="medium">
      <el-radio-button label="chinese">語(yǔ)文</el-radio-button>
      <el-radio-button label="math">數(shù)學(xué)</el-radio-button>
      <el-radio-button label="english">英語(yǔ)</el-radio-button>
    </el-radio-group>
    <el-radio-group v-model="radio4" size="small">
      <el-radio-button label="chinese">語(yǔ)文</el-radio-button>
      <el-radio-button label="math">數(shù)學(xué)</el-radio-button>
      <el-radio-button label="english">英語(yǔ)</el-radio-button>
    </el-radio-group>
    <el-radio-group v-model="radio4" size="mini">
      <el-radio-button label="chinese">語(yǔ)文</el-radio-button>
      <el-radio-button label="math">數(shù)學(xué)</el-radio-button>
      <el-radio-button label="english">英語(yǔ)</el-radio-button>
    </el-radio-group>
    <el-divider></el-divider>

效果如下：

6. 綁定值變化事件

當(dāng)綁定值發(fā)生變化時(shí)，可以通過(guò)@change指定觸發(fā)的事件方法。例如：

HTML代碼：

   	<el-radio @change="sexChange" v-model="radio1" label="male">男</el-radio>
    <el-radio @change="sexChange" v-model="radio1" label="female">女</el-radio>
    <el-divider></el-divider>
    <el-radio-group v-model="radio4" @change="courseChange">
      <el-radio-button label="chinese">語(yǔ)文</el-radio-button>
      <el-radio-button label="math">數(shù)學(xué)</el-radio-button>
      <el-radio-button label="english">英語(yǔ)</el-radio-button>
    </el-radio-group>

JS代碼：

export default {
  data() {
    return {
      radio1: 'male',
      radio2: 'basketball',
      radio3: 'male',
      radio4: 'chinese',
    };
  },
  methods: {
    sexChange() {
      console.log("sexChange");
    },
    courseChange() {
      console.log("courseChange");
    }
  }
}

當(dāng)選中項(xiàng)變化時(shí)，就會(huì)觸發(fā)對(duì)應(yīng)的methods中定義的方法。

注意：

el-radio提供了比較多的單選按鈕實(shí)現(xiàn)方式，建議還是使用單選框組，代碼結(jié)構(gòu)更加清晰容易管理。