Element UI实战教程之Radio单选按钮组件03

Element UI实战教程之Radio单选按钮组件03

Radio单选按钮

1.创建Radio按钮

     

     <el-radio label="男" v-model="label">男</el-radio>
          <el-radio label="女" v-model="label">女</el-radio>

    <script>
        export default {
            name: "Radio",
          data(){
              return{
                label: "男"
              }
          }
        }
    </script>

注意:在使用radio单选按钮是至少加入v-model和lable俩个属性

2.Radio按钮属性的使用

       

  <el-radio label="男" border size="small" v-model="label">男</el-radio>
          <el-radio label="女" v-model="label" border size="mini">女</el-radio>
          <el-radio label="女" v-model="label" border size="medium">女</el-radio>

Radio事件的使用

总结: 事件的使用也是和属性使用是一致的都是卸载对用的组件标签上

          事件在使用时必须使用vue中绑定事件的方式进行使用如@事件名=事件处理函数(绑定在vue组件中对应的函数)

radio按钮组的创建

     

<el-radio-group v-model="radio">
            <el-radio :label="3">备选项</el-radio>
            <el-radio :label="6">备选项</el-radio>
            <el-radio :label="9">备选项</el-radio>
          </el-radio-group>

    export default {
            name: "Radio",
          data(){
              return{
                label: "男",
                radio:""
              }
          },
          methods:{
              aa(){
                alert(this.label)
              }
          }
        }