v-model 结合radio的使用
- name 值相同 互斥
- v-model 绑定同一个值时 也是互斥
<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 结合 checkbox的使用
- 复选框分为两种情况 ：单个勾选和多个勾选
// 单选
<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 结合 select 的使用
- 单选 只能选中一个值
- v-model 绑定的是一个值
- 当我们选中option中的一个时 会将它对应的value赋值到mySelect中
- 多选 ： 可以选中多个值
- v-model 绑定一个数组
- 当选中多个值时 就会将选中的option对应的value添加到数组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:'苹果'
};
},
注意 按住ctri + 单击选中
// 多选
<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:'苹果'
};
},