ElementUI浅尝辄止34：Radio 单选框

在一组备选项中进行单选

1.如何使用？

由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。

//要使用 Radio 组件，只需要设置v-model绑定变量，选中意味着变量的值为相应 Radio label属性的值，label可以是String、Number或Boolean。
 
 
<script>
  export default {
    data () {
      return {
        radio: '1'
      };
    }
  }

2.禁用状态

单选框不可用的状态。

//只要在el-radio元素中设置disabled属性即可，它接受一个Boolean，true为禁用。
 
 
<script>
  export default {
    data () {
      return {
        radio: '选中且禁用'
      };
    }
  }
script>

3.单选框组

适用于在多个互斥的选项中选择的场景

/*结合el-radio-group元素和子元素el-radio可以实现单选组，在el-radio-group中绑定v-model，在el-radio中设置好label即可，无需再给每一个el-radio绑定变量，另外，还提供了change事件来响应变化，它会传入一个参数value。*/
 
 
<script>
  export default {
    data () {
      return {
        radio: 3
      };
    }
  }
script>

4.按钮样式

按钮样式的单选组合。

 
<script>
  export default {
    data () {
      return {
        radio1: '上海',
        radio2: '上海',
        radio3: '上海',
        radio4: '上海'
      };
    }
  }
script>

5.带有边框

设置border属性可以渲染为带有边框的单选框。
 
 
<script>
  export default {
    data () {
      return {
        radio1: '1',
        radio2: '1',
        radio3: '1',
        radio4: '1'
      };
    }
  }
script>