Vue(八)——表单数据双向绑定

表单双向绑定：

1. 绑定的数据能更新表单的值
2. 表单的值能更新所绑定的数据

• 通过v-model指令来实现双向绑定
• v-model——监听用户的输入事件来更新数据

规则：

• 初始化——v-model 会忽略所有表单元素的初始值而总是将 Vue 实例的数据data作为数据来源。
• 关联事件—v-model 在内部为不同的输入元素使用不同的 属性并抛出不同的事件

表单类型	属性	事件
text 、 textarea	value	input
checkbox、radio	默认checked，也可做value绑定	change
select	value	change

注意事项：

• 在文本区域插值 (<textarea>{{text}}</textarea>) 并不会生效，应用 v-model 来代替。
• 单个复选框checkbox可以绑定布尔值，自定义字符串类型；多个复选框可以绑定到数组
• 单选按钮radio可以绑定字符串
• 选择框select单选时绑定到字符串,设置多选multiple时可绑定到数组

实例：

<div id="app">
			<!-- input text类型，当行文本-->
			<input v-model.trim="message" type="text" />
			<p>Message is：{{message}}saa</p>
			<!-- input textarea类型，当行文本 -->
			<textarea v-model="message2" cols="24" rows="4"></textarea>
			<p>Message2 is：{{message2}}</p>
			<!-- 复选框，绑定数组类型-->
			<input type="checkbox" id="jack" value="jack" v-model="team" />
			<label for="jack">Jack</label>
			<input type="checkbox" id="Mark" value="Mark" v-model="team" />
			<label for="Mark">Mark</label>
			<input type="checkbox" id="Rondo" value="Rondo" v-model="team" />
			<label for="Rondo">Rondo</label>
			<input type="checkbox" id="Lucian" value="Lucian" v-model="team" />
			<label for="Lucian">Lucian</label>
			<p for="team">Now Team:{{team}}</p>
			<!-- 复选框也可以绑定bool值，只需要数据在data里声明bool类型-->
			<input type="checkbox" id="redis" value = "mmm" v-model="tech" />
			<p for="team2">Now Tech:{{tech}}</p>
			<!-- 复选框的值绑定也可以自定义，下面就定义了选中和没选中的两种值-->
			<input
			  type="checkbox"
			  v-model="toggle"
			  true-value="yes"
			  false-value="no"
			>
			<p for="toggle">Now toggle:{{toggle}}</p>
			<!-- 单选框 -->
			<input type="radio" id="man" value="男" v-model="sex" />
			<label for="man">男</label>
			<input type="radio" id="woman" value="女" v-model="sex" />
			<label for="woman">女</label>
			<p for="person">Now Sex:{{sex}}</p>
			<!-- 下拉框 -->
			<!-- 单选 -->
			<select name="" id="" v-model="answer">
				<option disabled value="">请选择</option>
				<option>A</option>
				<option>B</option>
				<option>C</option>
			</select>
			<p for="answer">Now Answer:{{answer}}</p>
			<!-- 多选 -->
			<div id="example-6">
			  <select v-model="selected" multiple style="width: 50px;">
			    <option>A</option>
			    <option>B</option>
			    <option>C</option>
			  </select>
			  <br>
			  <span>Now multiple Answer: {{ selected }}</span>
			</div>
			<!-- 使用v-for创建select -->
			<select v-model="todayfruit">
				<option v-for="item in fruit" v-bind:value ="item.val">{{item.text}}</option>
			</select>
			<p>Fruit Now:{{todayfruit}}</p>
		</div>

javascript:

		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					message:"赤红之瞳",
					message2:"灵之风息",
					team:[],
					tech:false,
					toggle:"",
					sex:"",
					answer:"",
                    selected:[],
					fruit:[
						{text:"香蕉",val:"banana"},
						{text:"苹果",val:"apple"},
						{text:"橘子",val:"orange"}
					],
					todayfruit:""
				}
			});
		</script>

结果：

修饰符

.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<input v-model.number="age" type="number">

这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">