theme: condensed-night-purple
highlight: a11y-dark
This is the 20th day of my participation in the note creation activity of the "Fourth Youth Training Camp"
Form controls are very common in actual development. Especially for the submission of user information, a large number of forms are required. Vue uses the v-model directive to implement two-way binding between form elements and data.
v-model principle
v-model is actually a grammatical sugar, which essentially contains two operations behind it:
- v-bind binds a value attribute
- The v-on directive binds the input event to the current element ```
```
Data two-way binding
By default, Vue only supports one-way transfer of data M-> VM -> V, but since Vue is based on the MVVM design pattern, it also provides the ability to transfer data in both directions. You can use the v-model instruction to create two-way data binding on elements <input>and Certainly<textarea><select>
Note: v-model will ignore the initial values of the value, checked, and selected attributes of all form elements and always use the data of the Vue instance as the data source
input value binding
After reading carefully, I found that it is very simple, that is, to dynamically assign values to values: the values in the previous values, you can look back, are all given directly when defining the input. But in real development, these input values may be obtained from the network or defined in data. So we can dynamically bind value to value through v-bind:value. Isn't this v-bind?
```html
{ {hobbies}}
```
Modifier
lazy modifier:
By default, v-model synchronizes the data of the input box in the input event by default. That is to say, once any data changes, the data in the corresponding data will automatically change.
lazy修饰符可以让数据在失去焦点或者回车时才会更新:
1) input事件在用户输入的时候会实时地、连续地触发 2) blur事件在输入框失去焦点时触发; 3) change事件在用户输入的值与上一次输入的值不同。并且输入框失去焦点时触发。
number修饰符:
默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。 但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。
number修饰符可以让在输入框中输入的内容自动转成数字类型
trim修饰符:
如果输入的内容首尾有很多空格，通常我们希望将其去除
trim修饰符可以过滤内容左右两边的空格
```
{ {messege}}
{ {age}}--{ {typeof age}}
你输入的名字：{ {name}}
```
v-model:radio
相同的name，在提交表单时只会提交一份，所以会互斥
label是将内容绑到一起，不用必须点击圆圈
```
您选择的性别是：{ {gender}}
```
v-model:checkbox
复选框分为两种情况∶单个勾选框和多个勾选框 复选框绑定的值是字符串类型的时候获得布尔值，如果是数组则是取value值 要获取多个value只能使用数组[]，不能使用对象或者其他
```
{ {isAgree}}
{ {hobbies}}
```
v-model:select
和checkbox一样，select也分为单选和双选两种情况
单选:只能选中一个值。 v-model绑定的是一个值。 当我们选中option中的一个时，会将它对应的value赋值到mySelect中 多选:可以选中多个值。 v-model绑定的是一个数组。 当选中多个值时，就会将选中的option对应的value添加到数组mySelects中 ```
{ {drink}}
{ {drinks}}
```