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')

附属JS

单选按钮样式

仅需要把 <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>

单选按钮

全部属性