006_ radio

1. Radio Radio buttons

1.1. Radio select from a set of alternatives .

1.2. Radio attribute

Parameters	explain	type	Optional value	The default value is
value / v-model	Binding value	string / number / boolean	nothing	nothing
label	Radio Of value	string / number / boolean	nothing	nothing
disabled	Whether to disable	boolean	nothing	false
border	Show border or not	boolean	nothing	false
size	Radio box group size , Only for buttons Radio Or with a border Radio It works	string	medium / small / mini	nothing
name	Native name attribute	string	nothing	nothing

1.3. Radio event

Event name	explain	Callback Arguments
change	Event triggered when the binding value changes	Selected Radio label value

1.4. Radio-group attribute

Parameters	explain	type	Optional value	The default value is
value / v-model	Binding value	string / number / boolean	nothing	nothing
size	Radio box group size , Only for buttons Radio Or with a border Radio It works	string	medium / small / mini	nothing
disabled	Whether to disable	boolean	nothing	false
text-color	In the form of buttons Radio Text color when activated	string	nothing	#ffffff
fill	In the form of buttons Radio Fill color and border color when active	string	nothing	#409EFF

1.5. Radio-group event

Event name	explain	Callback Arguments
change	Event triggered when the binding value changes	Selected Radio label value

1.6. Radio-button attribute

Parameters	explain	type	Optional value	The default value is
label	Radio Of value	string / number	nothing	nothing
disabled	Whether to disable	boolean	nothing	false
name	Native name attribute	string	nothing	nothing

2. Radio Radio box example

2.1. Use the scaffold to create a new one named element-ui-radio Front end projects , At the same time to install Element plug-in unit .

2.2. To write App.vue 

<template>
  <div id="app">
    <h1> Basic usage </h1>
    <template>
      <el-radio v-model="base_radio" label="1"> Options </el-radio>
      <el-radio v-model="base_radio" label="2"> Options </el-radio>
    </template>

    <h1> Disabled state </h1>
    <template>
      <el-radio disabled v-model="disabled_radio" label=" Ban "> Options </el-radio>
      <el-radio disabled v-model="disabled_radio" label=" Check and disable "> Options </el-radio>
    </template>

    <h1> Radio box group </h1>
    <template>
      <el-radio-group v-model="group_radio">
        <el-radio :label="3"> Options </el-radio>
        <el-radio :label="6"> Options </el-radio>
        <el-radio :label="9"> Options </el-radio>
      </el-radio-group>
    </template>
    <h1> Button style </h1>
    <div>
      <el-radio-group v-model="button_radio1" text-color="#F56C6C" fill="#67C23A">
        <el-radio-button label=" Shanghai "></el-radio-button>
        <el-radio-button label=" Beijing "></el-radio-button>
        <el-radio-button label=" Guangzhou "></el-radio-button>
        <el-radio-button label=" Shenzhen "></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=" Shanghai " ></el-radio-button>
        <el-radio-button label=" Beijing "></el-radio-button>
        <el-radio-button label=" Guangzhou "></el-radio-button>
        <el-radio-button label=" Shenzhen "></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=" Shanghai "></el-radio-button>
        <el-radio-button label=" Beijing " disabled ></el-radio-button>
        <el-radio-button label=" Guangzhou "></el-radio-button>
        <el-radio-button label=" Shenzhen "></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=" Shanghai "></el-radio-button>
        <el-radio-button label=" Beijing "></el-radio-button>
        <el-radio-button label=" Guangzhou "></el-radio-button>
        <el-radio-button label=" Shenzhen "></el-radio-button>
      </el-radio-group>
    </div>
    <h1> With borders </h1>
    <div>
      <el-radio v-model="border_radio1" label="1" border> Options 1</el-radio>
      <el-radio v-model="border_radio1" label="2" border> Options 2</el-radio>
    </div>
    <div style="margin-top: 20px">
      <el-radio v-model="border_radio2" label="1" border size="medium"> Options 1</el-radio>
      <el-radio v-model="border_radio2" label="2" border size="medium"> Options 2</el-radio>
    </div>
    <div style="margin-top: 20px">
      <el-radio-group v-model="border_radio3" size="small">
        <el-radio label="1" border> Options 1</el-radio>
        <el-radio label="2" border disabled> Options 2</el-radio>
      </el-radio-group>
    </div>
    <div style="margin-top: 20px">
      <el-radio-group v-model="border_radio4" size="mini" disabled>
        <el-radio label="1" border> Options 1</el-radio>
        <el-radio label="2" border> Options 2</el-radio>
      </el-radio-group>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      base_radio: '1',
      disabled_radio: ' Check and disable ',
      group_radio: 3,
      button_radio1: ' Shanghai ',
      button_radio2: ' Shanghai ',
      button_radio3: ' Shanghai ',
      button_radio4: ' Shanghai ',
      border_radio1: '1',
      border_radio2: '1',
      border_radio3: '1',
      border_radio4: '1'
    }
  }
}
</script>

2.3. Run the project