v-model详细使用

1、v-model结合radio

<label for="male">
	//value的值通过v-model和sex绑定到了一起
	<input type="radio" id="male" value="男" v-model="sex">男
</label>
<label for="female">
	<input type="radio" id="female "value="女" v-model="sex">女
</label>

data(){
	return{
		sex: "男"//默认选择男
	}
}

2、v-model结合checkbox

2.1 单选框的情况，此时v-model绑定的是Boolean值，选中绑定true，取消绑定false：

<input type="checkbox" v-model="isAgree" >同意协议
<h2>您的选择是：{{isAgree}} </h2>
<button :disabled="!isAgree"> 下一步 //选择了单选框后才让点


data(){
	return{
		isAgree: false //默认未选上
	}
}

效果：

2.2多选框的情况，此时v-model是数组类型

<input type="checkbox" value="篮球" v-model="hobbies">
<input type="checkbox" value="足球" v-model="hobbies">
<input type="checkbox" value="乒乓球" v-model="hobbies">
<input type="checkbox" value="羽毛球" v-model="hobbies">

<h2>您的爱好是：{{hobbies}}</h2>


data(){
	return{
		hobbies: []
	}
}

效果：

2.3动态展示：

<label v-for="item in list" :for="item">
	<input type="checkbox" :value="item" :id="item " v-model="hobbies">{{item}}
</label>

<h2>您的爱好是：{{hobbies}}</h2>


data(){
	return{
		list:['篮球','台球','羽毛球','足球'],
		hobbies: []
	}
}

3、v-model结合select

3.1单选

<select name="fruit" id="aaa" v-model="fruit">
	<option value="苹果">苹果</option>
	<option value="香蕉">香蕉</option>
	<option value="橘子">橘子</option>
	
</select>


data(){
	return{
		fruie: '香蕉' //默认选择香蕉
	}
}

3.2多选

<select name="fruit" v-model="fruits" mltiple>
	<option value="苹果">苹果</option>
	<option value="香蕉">香蕉</option>
	<option value="橘子">橘子</option>
	
</select>


data(){
	return{
		fruits: [] 
	}
}

4、v-model修饰符

4.1 v-mode.lazy ：默认情况下，v-model是实时和data的数据进行绑定的，lazy修饰符可以让数据在失去焦点或者回车时才更新绑定。

4.2 v-model.number：默认情况下，v-model会把输入框输入的无论时数字还是字母都当作字符串进行处理，number修饰符可以让输入框输入的内容自动转化成数值类型处理。

4.3 v-mode.trim：如果输入的内容收尾有很多空格，trim修饰符可以自动删除掉收尾的空格。