Vue中v-model结合radio、checkbox、select类型的绑定

一.与radio结合

• 在用radio实现单选时，我们采用name元素来达到目的

• 当radio与v-model结合时，可以将name元素省略，用v-model来达到目的

二.与checkbox结合

1.checkbox实现单选

• 如果checkbox里的v-model=“Boolean类型”，当点击此选框时，boolean类型会自动转换。即true->false,false->true
• 一般对应data中的布尔类型

<div id="app">
    <label for="agree">
        <input type="checkbox" id="agree"  v-model="isAgree" >同意协议  //isAgree初始定义为false
    </label>
    <h2>您选择的是：{{isAgree}}</h2>
    <button :disabled="!isAgree">下一步</button>
</div>

2.checkbox实现多选框

• 一般对应data中的数组类型，因为要返回多个值

<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="足球" v-model="hobbies">足球
<h2>您选择的是：{{hobbies}}</h2>

3.与select结合

1.select实现单选

• v-model绑定的是一个值

2.select实现多选

• 在select标签内部，多写一个mutiple，在浏览器中按住ctrl键即可实现多选
• v-model绑定的是一个数组

<div id="app">
		<select name="abc" v-model="fruit"> //在select中写v-model，此select为单选
			<option value="香蕉">香蕉</option>
			<option value="苹果">苹果</option>
			<option value="橘子">橘子</option>
		</select>
		
		<select name="abc" v-model="fruits" multiple>//此select为多选
			<option value="香蕉">香蕉</option>
			<option value="苹果">苹果</option>
			<option value="橘子">橘子</option>
		</select>
		<h2>您选择的水果是：{{fruits}}</h2>
	</div>	
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>	
<script type="text/javascript">
	var app = new Vue({
		el: "#app",
		data:{
			fruit: "苹果",
			fruits: [],
		}
	})
</script>

4.值绑定

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

<script>
 var arr = new Vue({
	el : "#app",
	data:{
		hobbies: [],
		originHobbies: ['篮球','足球','乒乓球','羽毛球'],
}
})
</script>

• 之前的案例中，value值都是直接定义在input中的，即为写死的
• 但在实际开发中，这些input的值可能是从网络中获取或定义在data中
• 所以可以使用v-bind:value=""来动态给value绑定值，缩写为:value=""

5.修饰符

1）lazy修饰符：

• 默认情况下，v-model默认是在input事件中同步输入框的数据
• 也就是说，一旦数据发生改变对应的data中数据就会自动发生改变
• lazy修饰符实现懒加载的目的，它可以让数据在失去焦点或者按下回车键时才会更新，即v-model.lazy=""

2）number

• 默认情况下，在输入框中无论输入的是数字还是字母，v-model都会将其转换为字符串类型
• 如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理
• number修饰符可以让输入框中输入的内容自动转成数字类型v-model.number=""

3）trim修饰符

• 如果输入的内容首尾有很多的空格，通常我们希望将其去除
• trim修饰符可以过滤内容左右两边的空格v-model.trim=""