要使用 Radio 组件,只需要设置v-model
绑定变量,选中意味着变量的值为相应 Radio label
属性的值,label
可以是String
、Number
或Boolean
。
只要在el-radio
元素中设置disabled
属性即可,它接受一个Boolean
,true
为禁用。
结合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>
实验效果