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>

单选按钮

全部属性