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>

单选按钮

所有属性