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