当前位置 博文首页 > Elegance never goes out of fashion：ElementUI单选按钮组件
Radio 单选框
在一组备选项中进行单选
创建一个单选按钮
<el-radio >男</el-radio>
<el-radio>女</el-radio>
此时虽然创建出来两个单选按钮但是不能进行选中和取消，这里必须配合我们的value / v-model和label属性进行使用。
<template>
<div>
<h1>radio组件的使用</h1>
<!--组件创建-->
<el-radio v-model="label" label="男">男</el-radio>
<el-radio v-model="label" label="女">女</el-radio>
</div>
</template>
<script>
export default {
name: "Radio",
data(){
return{
label:'女'
}
}
}
</script>
Radio按钮属性的使用
<el-radio v-model="label" name="sex" disabled label="男">男</el-radio>
<el-radio v-model="label" name="sex" label="女">女</el-radio>
总结：属性的使用还是直接写在对应的组件标签上以 属性名 = 属性值 的方式使用。
Radio事件的使用
@事件名=事件处理函数(绑定在vue组组件中对应函数) <el-radio v-model="label" @change="aa" name="sex" label="男">男</el-radio>
<el-radio v-model="label" @change="aa" name="sex" label="女">女</el-radio>
<script>
export default {
methods:{
aa(){
console.log(this.label)
}
}
}
</script>
Radio单选按钮组的使用
<el-radio-group v-model="radio">
<el-radio label="3">备选项3</el-radio>
<el-radio label="6">备选项6</el-radio>
<el-radio label="9">备选项9</el-radio>
</el-radio-group>
<script>
export default {
data(){
return{
radio: '3'
}
},
methods:{
bb(){
console.log(this.radio)
}
}
}
</script>
