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

单选按钮样式

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

全部属性