V-model指令

使用V-model指令，可以实现表单元素和model中数据的双向绑定

-----v-model绑定的data的数据后会根据用户的操作进行更改

• 可以用v-model指令在表单(input textarea select)元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户输入事件以更新数据
• v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

text 和 textarea 元素使用 value 属性和 input 事件；—，v-model对应的数据为input的value属性
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

1.1、text和textarea

----给text和textarea绑定数据用v-model他会根据用户输入的value值及逆行更改data里面被绑定的变量，变量名无所谓

1.2、checkbox

----给类型为checkbox双向数据绑定勾选为true，取消勾选为false

----通常v-model对应的都是字符串，这次我们初始化为空数组[]则不会改变为false和true，而是设置的value值

//前端代码
 <input type="checkbox" v-model="msg" value="angular">angular<br>
   <input type="checkbox" v-model="msg" value="react">react<br>
   <input type="checkbox" v-model="msg" value="vue">vue<br>
   {{msg}}
//js的代码
data: {
    firstName: 'zheng',
    lastName: 'zeling',
    checked:'false',
    content:'aasdfghj',
    msg:[]
}

------可以看到，选中谁，谁的value就会添加到数组里，且数据是双向绑定的，所以，当我们初始化数据的数组里赋予上面的value值时，所对应的checkbox便会默认选中

—打印的msg里面就会根据

总结chekbox的双向绑定

.checkbox和普通input一样，点击勾选其实就是输入value,而输入value会改变checked属性,所以会选中
当v-model对应“字符串”时会解析“字符串”为布尔值，v-model对应有值或是true，checkbox都会选中。
2.当v-model对应“数组”时有勾表示已选中，相当于赋值给，相当于有value，v-model对应value,
没有value属性时，点勾相当于将(‘null’)赋值给value——>v-model('null’为字符串),
有value属性时，点勾相当于将(value)赋值给value——>v-model，
注意数据是双向绑定的，所以数组里的值对应着checkbox的value——>v-model。
3.处理表单，v-model一般都是对应字符串，所以处理checkbox的v-model，善用对应布尔值控制勾选。

1.3单选框radio

<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked"><label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked"><label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
new Vue({ el: '#example-4', data: { picked: '' } })

1.3选择框

<div id="example-5">
<select v-model="selected">
<option disabled value="">请选择</option> 
<option>A</option> 
<option>B</option> 
<option>C</option> 
</select>
<span>Selected: {{ selected }}</span> 
</div>
new Vue({ el: '...', data: { selected: '' } })

• 多选时(绑定到一个数组)

<div id="example-6"> 
<select v-model="selected" multiple style="width: 50px;"><option>A</option>
<option>B</option>
<option>C</option> 
</select>
<br>
<span>Selected: {{ selected }}</span>
</div>
new Vue({ el: '#example-6', data: { selected: [] } })

<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">
<!-- 当选中第一个选项时，`selected` 为字符串 "abc" --> \
<select v-model="selected">
<option value="abc">ABC</option>
</select>