1. Radio單選框

1.1. 在一組備選項中進行單選。

1.2. Radio屬性

參數	說明	類型	可選值	默認值
value / v-model	綁定值	string / number / boolean	無	無
label	Radio的value	string / number / boolean	無	無
disabled	是否禁用	boolean	無	false
border	是否顯示邊框	boolean	無	false
size	單選框組尺寸, 僅對按鈕形式的Radio或帶有邊框的Radio有效	string	medium / small / mini	無
name	原生name屬性	string	無	無

1.3. Radio事件

事件名稱	說明	回調參數
change	綁定值變化時觸發的事件	選中的Radio label值

1.4. Radio-group屬性

參數	說明	類型	可選值	默認值
value / v-model	綁定值	string / number / boolean	無	無
size	單選框組尺寸, 僅對按鈕形式的Radio或帶有邊框的Radio有效	string	medium / small / mini	無
disabled	是否禁用	boolean	無	false
text-color	按鈕形式的Radio激活時的文本顏色	string	無	#ffffff
fill	按鈕形式的Radio激活時的填充色和邊框色	string	無	#409EFF

1.5. Radio-group事件

事件名稱	說明	回調參數
change	綁定值變化時觸發的事件	選中的Radio label值

1.6. Radio-button屬性

參數	說明	類型	可選值	默認值
label	Radio的value	string / number	無	無
disabled	是否禁用	boolean	無	false
name	原生name屬性	string	無	無

2. Radio單選框例子

2.1. 使用腳手架新建一個名為element-ui-radio的前端項目, 同時安裝Element插件。

2.2. 編寫index.js?

import Vue from 'vue' import VueRouter from 'vue-router' import Radio from '../components/Radio.vue' import ButtonRadio from '../components/ButtonRadio.vue' import BorderRadio from '../components/BorderRadio.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/Radio' },{ path: '/Radio', component: Radio },{ path: '/ButtonRadio', component: ButtonRadio },{ path: '/BorderRadio', component: BorderRadio } ]const router = new VueRouter({routes })export default router

2.3. 在components下創建Radio.vue

<template><div><h1>基礎用法</h1><h4>要使用Radio組件, 只需要設置v-model綁定變量, 選中意味著變量的值為相應Radio label屬性的值, label可以是String、Number或Boolean。</h4><template><el-radio v-model="base_radio" label="男" @change="radioChange">男</el-radio><el-radio v-model="base_radio" label="女" @change="radioChange">女</el-radio></template><h1>禁用狀態-單選框不可用的狀態</h1><h4>只要在el-radio元素中設置disabled屬性即可, 它接受一個Boolean, true為禁用。</h4><template><el-radio disabled v-model="disabled_radio" :label="true">男</el-radio><el-radio disabled v-model="disabled_radio" :label="false">女</el-radio></template><h1>單選框組-適用于在多個互斥的選項中選擇的場景</h1><h4>結合el-radio-group元素和子元素el-radio可以實現單選組, 在el-radio-group中綁定v-model, 在el-radio中設置好label即可, 無需再給每一個el-radio綁定變量, 另外, 還提供了change事件來響應變化, 它會傳入一個參數value。</h4><template><el-radio-group v-model="group_radio"><el-radio :label="1">男</el-radio><el-radio :label="2">女</el-radio><el-radio :label="3">未知</el-radio></el-radio-group></template></div> </template><script> export default {data () {return {base_radio: '男',disabled_radio: false,group_radio: 3}},methods: {radioChange (val) {console.log(val)}} } </script>

2.4. 在components下創建ButtonRadio.vue

<template><div><h1>按鈕樣式</h1><h4>只需要把el-radio元素換成el-radio-button元素即可, 此外, Element 還提供了size屬性。</h4><div><el-radio-group v-model="button_radio1" text-color="#F56C6C" fill="#67C23A" @change="radioGroupChange"><el-radio-button label="北京"></el-radio-button><el-radio-button label="上海"></el-radio-button><el-radio-button label="廣州"></el-radio-button><el-radio-button label="深圳"></el-radio-button></el-radio-group></div><div style="margin-top: 20px"><el-radio-group v-model="button_radio2" size="medium"><el-radio-button label="北京"></el-radio-button><el-radio-button label="上海" ></el-radio-button><el-radio-button label="廣州"></el-radio-button><el-radio-button label="深圳"></el-radio-button></el-radio-group></div><div style="margin-top: 20px"><el-radio-group v-model="button_radio3" size="small"><el-radio-button label="北京" disabled ></el-radio-button><el-radio-button label="上海"></el-radio-button><el-radio-button label="廣州"></el-radio-button><el-radio-button label="深圳"></el-radio-button></el-radio-group></div><div style="margin-top: 20px"><el-radio-group v-model="button_radio4" disabled size="mini"><el-radio-button label="北京"></el-radio-button><el-radio-button label="上海"></el-radio-button><el-radio-button label="廣州"></el-radio-button><el-radio-button label="深圳"></el-radio-button></el-radio-group></div></div> </template><script> export default {data () {return {button_radio1: '北京',button_radio2: '上海',button_radio3: '廣州',button_radio4: '深圳'}},methods: {radioGroupChange (val) {console.log(val)}} } </script>

2.5. 在components下創建BorderRadio.vue

<template><div><h1>帶有邊框</h1><h4>設置border屬性可以渲染為帶有邊框的單選框。</h4><div><el-radio v-model="border_radio1" label="男" border>男</el-radio><el-radio v-model="border_radio1" label="女" border>女</el-radio></div><div style="margin-top: 20px"><el-radio v-model="border_radio2" label="男" border size="medium">男</el-radio><el-radio v-model="border_radio2" label="女" border size="medium">女</el-radio></div><div style="margin-top: 20px"><el-radio-group v-model="border_radio3" size="small"><el-radio label="男" border>男</el-radio><el-radio label="女" border disabled>女</el-radio></el-radio-group></div><div style="margin-top: 20px"><el-radio-group v-model="border_radio4" size="mini" disabled><el-radio label="男" border>男</el-radio><el-radio label="女" border>女</el-radio></el-radio-group></div></div> </template><script> export default {data () {return {border_radio1: '男',border_radio2: '男',border_radio3: '男',border_radio4: '男'}} } </script>

2.6. 運行項目, 訪問http://localhost:8080/#/Radio

2.7. 運行項目, 訪問http://localhost:8080/#/ButtonRadio?

2.8. 運行項目, 訪問http://localhost:8080/#/BorderRadio?

總結

以上是生活随笔為你收集整理的006_Radio单选框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。