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 

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

單選組

1 var Main = { 2  data () { 3       return { 4         radio: 's'
5  }; 6  } 7  } 8 var Ctor = Vue.extend(Main) 9 new Ctor().$mount('#app')

附屬JS

單選按鈕樣式

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

1   <div style="margin-top: 20px">
2     <el-radio-group v-model="radio4" size="medium">
3       <el-radio-button label="上海" ></el-radio-button>
4       <el-radio-button label="北京"></el-radio-button>
5       <el-radio-button label="廣州"></el-radio-button>
6       <el-radio-button label="深圳"></el-radio-button>
7     </el-radio-group>
8   </div>

單選按鈕

所有屬性