1. Checkbox
checkedNames is the value of the value of the selected check box, the array values are arranged in the order of check box selection
// Multiple checkboxes are bound to the array <div id='example-3'> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> </div> new View ({ the: '# example-3' , data: { checkedNames: [] } })
2. Radio button
The picked output value is the value of the value of the selected radio button
<div id="example-4"> <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <br> <span>Picked: {{ picked }}</span> </div> new View ({ the: '# example-4' , data: { picked: '' } })
3. Selection box
1. When single selection
selected is the selected option value
Note: If v-model
the initial value of the expression fails to match any option, the <select>
element will be rendered as "unselected"
<div id="example-5"> <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div> new View ({ the: '...' , data: { selected: '' } })
2. When multiple selection
The selected value is the selected option, the sorting in the array is sorted according to the option, different from the checkbox according to the order
<div id="example-6"> <select v-model="selected" multiple style="width: 50px;"> <option>A</option> <option>B</option> <option>C</option> </select> <br> <span>Selected: {{ selected }}</span> </div> new View ({ the: '# example-6' , data: { selected: [] } })
3. Use v-for to render radio
The option displays text, and what we selected is the value. example:
<select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select> <span>Selected: {{ selected }}</span> new View ({ the: '...' , data: { selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] } })