Vue.js 学习笔记八：表单绑定 v-model

目录

表单绑定 v-model

基本使用

v-model: radio

v-model: checkbox

v-model: select

值绑定

修饰符

---

表单绑定 v-model

表单控件在实际开发中是非常常见的。特别是对于用户信息的提交，需要大量的表单。

Vue 中使用 v-model 指令来实现表单元素和数据的双向绑定。

 

基本使用

v-model其实是一个语法糖，它的背后本质上是包含两个操作：

v-bind绑定一个 value 属性；

v-on 指令给当前元素绑定 input 事件。

		<div id="app">
			<form>
				<label for="text">请输入</label>
				<input type="text" id="text" value="" v-model="text"/>
				<h4>你输入的是：{{ text }}</h4>				
			</form>
		</div>
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data:{
					text: '',
				}
			})
		</script>

 

v-model: radio

当存在多个单选框时：

		<div id="app">
			<form>
				<input type="radio" id="man" v-model="sex" value="男"/>
                <label for="man">男</label>
				<input type="radio" id="woman" v-model="sex" value="女" />
                <label for="woman">女</label>
				<h4>你单选的是：{{ sex }}</h4>				
			</form>
		</div>
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data:{
					sex:'',
					}
			})
		</script>

 

v-model: checkbox

复选框分为两种情况：

单个勾选框：

v-model 即为布尔值。

此时 input 的 value 并不影响 v-model 的值。

多个复选框：

当是多个复选框时，因为可以选中多个，所以对应的 data 中属性是一个数组。

当选中某一个时，就会将 input 的 value 添加到数组中。

		<div id="app">
			<form>
				<input type="checkbox" id="h1" value="篮球" v-model="holiday" /><label for="h1">篮球</label>
				<input type="checkbox" id="h2" value="足球" v-model="holiday"/><label for="h2">足球</label>
				<input type="checkbox" id="h3" value="排球" v-model="holiday" /><label for="h3">排球</label>
				<h4>你勾选的是：{{ holiday }}</h4>			
			</form>
		</div>
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data:{
					holiday: [],
					}
			})
		</script>

 

v-model: select

和 checkbox 一样，select 也分单选和多选两种情况。

单选：只能选中一个值。

v-model 绑定的是一个值。

当我们选中 option 中的一个时，会将它对应的 value 赋值到 cities 中。

多选：可以选中多个值。

v-model 绑定的是一个数组。

当选中多个值时，就会将选中的 option 对应的 value 添加到数组 cities 中。

		<div id="app">
			<form>		
				<select v-model="cities" multiple>
					<option disabled="disabled">请选择</option>
					<option>南京</option>
					<option>北京</option>
					<option>上海</option>
				</select>
				<h4>你选择的是：{{ cities }}</h4>
			</form>
		</div>
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data:{					
					cities:['南京'],
					}
			})
		</script>

 

值绑定

初看 Vue 官方值绑定的时候，我很疑惑这是什么？但是仔细阅读之后，发现很简单，就是动态的给 value 赋值而已。我们前面的 value 中的值，可以回头去看一下，都是在定义 input 的时候直接给定的。

但是真实开发中，这些 input 的值可能是从网络获取或定义在 data 中的。所以我们可以通过 v-bind:value 动态的给 value 绑定值。

这里不再给出对应的代码，因为会用 v-bind，就会值绑定的应用了。

 

修饰符

.lazy 修饰符

默认情况下，v-model 默认是在 input 事件中同步输入框的数据的。也就是说，一旦有数据发生改变对应的 data 中的数据就会自动发生改变。lazy 修饰符可以让数据在失去焦点或者回车时才会更新。

 <input type="text" id="text" value="" v-model.lazy="text"/>

.number 修饰符

默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。number 修饰符可以让在输入框中输入的内容自动转成数字类型。

<input type="number" id="text" value="" v-model.number="text"/>

.trim 修饰符

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

 <input type="text" id="text" value="" v-model.trim="text"/>