vuejs表单控件绑定

一、基础语法

vuejs中用v-model指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。但要注意的是v-model仅仅是语法糖，它只负责监听用户的输入时间一更新数据，并特别处理一些极端的例子。

注：1.·v-model`并不关心表单控件初始化所生成的值。因为它会选择Vue实例数据来作为具体的值

2.当控件有多种语言的需求时，v-model不会因为语言的改变而更新，在这种情况下要使用`input’事件来替代

1.文本

<input v-model="message" placeholder="edit me">
<p>Message is: {
   { message }}</p>

2.多行文本

<span>Multiline message is:</span>
<p style="white-space: pre">{
   { message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

注：在文本区域插值(<textarea></textarea>)并不会生效，应用v-model来替代

3.复选框

a.单个勾选框，逻辑值：

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{
   { checked }}</label>

b.多个勾选框，绑定到同一个数组：

<input type="checkbox" id="jack"