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>

单选按钮

全部属性

 

转载于:https://www.cnblogs.com/xsmile/p/10410495.html