elementUI 學習入門之 radio 單選框

Radio 單選框

基礎用法

選項默認可見，選項不宜過多，選項過多建議使用 select 選擇器

使用 Radio 組件，需要設置 v-model 綁定變量，選中意味着變量的值為相應 Radio  label 的值，label 值可以為 String，Number，Boolean

<el-radio v-model="radio1" label="1">選項1</el-radio>
<el-radio v-model="radio1" label="2">選項2</el-radio>

單選框禁用狀態

在 Radio 組件中設置 disabled 屬性即可

單選邊框

在 <el-radio> 中設置 border 屬性，可以渲染為帶邊框的單選框 

單選框組

使用 <el-radio-group> 元素和子元素 <el-radio> 實現單選組。在 <el-radio-group> 中綁定 v-model ，<el-radio> 中設置 label 屬性值即可。不需要給每個 <el-radio> 綁定變量。另外還提供 change 事件響應變化，會傳入參數 value 

<template>
  <el-radio-group v-model="radio2">
    <el-radio :label="3">備選項</el-radio>
    <el-radio :label="6">備選項</el-radio>
    <el-radio :label="9">備選項</el-radio>
  </el-radio-group>
</template>

var Main = {
    data () {
      return {
        radio: 's'
      };
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

單選按鈕樣式

僅需要把 <el-radio> 換成 <el-radio-button> 即可，此外 <el-radio-group> 還提供 size 屬性

  <div style="margin-top: 20px">
    <el-radio-group v-model="radio4" size="medium">
      <el-radio-button label="上海" ></el-radio-button>
      <el-radio-button label="北京"></el-radio-button>
      <el-radio-button label="廣州"></el-radio-button>
      <el-radio-button label="深圳"></el-radio-button>
    </el-radio-group>
  </div>

全部屬性