v-model combined with the use of radio
- The same value of name is mutually exclusive
- When v-model is bound to the same value, it is also mutually exclusive
<label>
<input type="radio" name="val" id="" value='男' v-model="value">男
</label>
<label>
<input type="radio" name="val" id="" value='女' v-model="value">女
</label>
<p>你的性别是:{
{
value}}</p>
data() {
return {
value:'男' // 默认为男
};
},
v-model combined with the use of checkbox
- There are two types of checkboxes: single check and multiple check
// 单选
<label for="agree">
<input type="checkbox" name="val" id="agree" v-model="isagree">统一协议
</label>
<p>{
{
isagree}}</p>
<button :disabled='!isagree'>下一步</button>
data() {
return {
isagree:false
};
},
// 多选
<label >
<input type="checkbox" name="val" value="篮球" v-model="isagree">篮球
<input type="checkbox" name="val" value="足球" v-model="isagree">足球
<input type="checkbox" name="val" value="乒乓球" v-model="isagree">乒乓球
<input type="checkbox" name="val" value="羽毛球" v-model="isagree">羽毛球
<h2>你的爱好：{
{
isagree}}</h2>
</label>
data() {
return {
isagree:[]
};
},
v-model combined with the use of select
- Single selection can only select one value
- v-model is bound to a value
- When we select one of the options, the corresponding value will be assigned to mySelect
- Multiple selection: multiple values can be selected
- v-model binds an array
- When multiple values are selected, the value corresponding to the selected option will be added to the array mySelect
// 单选
<select v-model="mySelect">
<option value="苹果" >苹果</option>
<option value="香蕉">香蕉</option>
<option value="梨子">梨子</option>
<option value="西瓜">西瓜</option>
</select>
<p>你的选择是{
{
mySelect}}</p>
</div>
data() {
return {
mySelect:'苹果'
};
},
Note that hold ctri + click to select
// 多选
<select name="aa" v-model="mySelect" :multiple='true'>
<option value="苹果" >苹果</option>
<option value="香蕉">香蕉</option>
<option value="梨子">梨子</option>
<option value="西瓜">西瓜</option>
</select>
<p>你的选择是{
{
mySelect}}</p>
data() {
return {
mySelect:'苹果'
};
},