书山有路勤为径,学海无涯苦作舟。 知识改变命运,行动创造未来。

单选按钮

要使用 Radio 组件,只需要设置v-model绑定变量,选中意味着变量的值为相应 Radio label属性的值,label可以是StringNumberBoolean

禁用

只要在el-radio元素中设置disabled属性即可,它接受一个Booleantrue为禁用。

单元按钮组

结合el-radio-group元素和子元素el-radio可以实现单选组,在el-radio-group中绑定v-model,在el-radio中设置好label即可,无需再给每一个el-radio绑定变量,另外,还提供了change事件来响应变化,它会传入一个参数value

样式

只需要把el-radio元素换成el-radio-button元素即可,此外,Element 还提供了size属性。

边框

设置border属性可以渲染为带有边框的单选框。

<template>
  <div>
     <el-radio v-model="radio" label="1"> test</el-radio>
     <el-radio  disabled v-model="radio" label="2"> prod</el-radio>

      <p> {{ radio }}</p>

     <el-radio-group v-model="newradio">
       <el-radio label="3">1</el-radio>
       <el-radio label="4">2</el-radio>
       <el-radio label="5">3</el-radio>

     </el-radio-group>

     <p> {{ newradio }}</p>


     <el-radio-group v-model="courses" size="small">
       <el-radio-button label="java">Java</el-radio-button>
       <el-radio-button label="linux">Linux</el-radio-button>
       <el-radio-button label="python">Python</el-radio-button>
       <el-radio-button label="web">Web</el-radio-button>
     </el-radio-group>

     <p> {{ courses }}</p>

     <el-radio v-model="courses" label="web" border>备选项1</el-radio>
     <el-radio v-model="courses" label="web2" border>备选项2</el-radio>


  </div>

</template>

<script>
  export default {
    data () {
      return {
        radio: '2',
        newradio: '3',
        courses: 'web'
      };
    }
  }
</script>

<style>

</style>

实验效果

image