商业网站的后缀,网页源代码下载音乐,厂房验收 技术支持 东莞网站建设,公司网站建设开发济南兴田德润简介图片在一组备选项中进行单选 1.如何使用#xff1f;
由于选项默认可见#xff0c;不宜过多#xff0c;若选项过多#xff0c;建议使用 Select 选择器。
//要使用 Radio 组件#xff0c;只需要设置v-model绑定变量#xff0c;选中意味着变量的值为相应 Radio label属性的值
由于选项默认可见不宜过多若选项过多建议使用 Select 选择器。
//要使用 Radio 组件只需要设置v-model绑定变量选中意味着变量的值为相应 Radio label属性的值label可以是String、Number或Boolean。templateel-radio v-modelradio label1备选项/el-radioel-radio v-modelradio label2备选项/el-radio
/templatescriptexport default {data () {return {radio: 1};}}
/script
2.禁用状态
单选框不可用的状态。
//只要在el-radio元素中设置disabled属性即可它接受一个Booleantrue为禁用。templateel-radio disabled v-modelradio label禁用备选项/el-radioel-radio disabled v-modelradio label选中且禁用备选项/el-radio
/templatescriptexport default {data () {return {radio: 选中且禁用};}}
/script
3.单选框组
适用于在多个互斥的选项中选择的场景
/*结合el-radio-group元素和子元素el-radio可以实现单选组在el-radio-group中绑定v-model在el-radio中设置好label即可无需再给每一个el-radio绑定变量另外还提供了change事件来响应变化它会传入一个参数value。*/templateel-radio-group v-modelradioel-radio :label3备选项/el-radioel-radio :label6备选项/el-radioel-radio :label9备选项/el-radio/el-radio-group
/templatescriptexport default {data () {return {radio: 3};}}
/script
4.按钮样式
按钮样式的单选组合。
templatedivel-radio-group v-modelradio1el-radio-button label上海/el-radio-buttonel-radio-button label北京/el-radio-buttonel-radio-button label广州/el-radio-buttonel-radio-button label深圳/el-radio-button/el-radio-group/divdiv stylemargin-top: 20pxel-radio-group v-modelradio2 sizemediumel-radio-button label上海 /el-radio-buttonel-radio-button label北京/el-radio-buttonel-radio-button label广州/el-radio-buttonel-radio-button label深圳/el-radio-button/el-radio-group/divdiv stylemargin-top: 20pxel-radio-group v-modelradio3 sizesmallel-radio-button label上海/el-radio-buttonel-radio-button label北京 disabled /el-radio-buttonel-radio-button label广州/el-radio-buttonel-radio-button label深圳/el-radio-button/el-radio-group/divdiv stylemargin-top: 20pxel-radio-group v-modelradio4 disabled sizeminiel-radio-button label上海/el-radio-buttonel-radio-button label北京/el-radio-buttonel-radio-button label广州/el-radio-buttonel-radio-button label深圳/el-radio-button/el-radio-group/div
/templatescriptexport default {data () {return {radio1: 上海,radio2: 上海,radio3: 上海,radio4: 上海};}}
/script
5.带有边框
设置border属性可以渲染为带有边框的单选框。templatedivel-radio v-modelradio1 label1 border备选项1/el-radioel-radio v-modelradio1 label2 border备选项2/el-radio/divdiv stylemargin-top: 20pxel-radio v-modelradio2 label1 border sizemedium备选项1/el-radioel-radio v-modelradio2 label2 border sizemedium备选项2/el-radio/divdiv stylemargin-top: 20pxel-radio-group v-modelradio3 sizesmallel-radio label1 border备选项1/el-radioel-radio label2 border disabled备选项2/el-radio/el-radio-group/divdiv stylemargin-top: 20pxel-radio-group v-modelradio4 sizemini disabledel-radio label1 border备选项1/el-radioel-radio label2 border备选项2/el-radio/el-radio-group/div
/templatescriptexport default {data () {return {radio1: 1,radio2: 1,radio3: 1,radio4: 1};}}
/script
