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

表单双向绑定：

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

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

规则：

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

注意事项：

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

实例：

			
			
			
Message is：{{message}}saa
			
			
			
Message2 is：{{message2}}
			
			
			Jack
			
			Mark
			
			Rondo
			
			Lucian
			
Now Team:{{team}}
			
			
			
Now Tech:{{tech}}
			
			
			
Now toggle:{{toggle}}
			
			
			男
			
			女
			
Now Sex:{{sex}}
			
			
			
				请选择
				A
				B
				C
			
			
Now Answer:{{answer}}
			
			

			  
			    A
			    B
			    C
			  
			  

			  Now multiple Answer: {{ selected }}
			
			
			
				{{item.text}}
			
			
Fruit Now:{{todayfruit}}
		

javascript:

结果：

修饰符

.lazy

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

.number

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

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

.trim

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