Vue学习4:整理了input标签和v-model的关系

看视频学vue，发现vue还挺多需要记忆的点，也有很多概念容易搞混，想着以后遇到一点就记录一点吧，慢慢学~

Form input标签语法与结构

<input name="" type="submit" value="提交" />

• Name为此表单控件识别命名，一般使用英文字母在一个页面里具有唯一性
• Type为表单控件样式
• type=“text” 输入框控件，用于输入内容如用户名、密码之类内容输入框控件
• type=“submit” 按钮控件，用于提交、重置动作
• type=“checkbox” 多选复选框控件，用于多选题、多选功能(进入了解 html checkbox多选框)
• type=“radio” 单选框，用于单选，唯一选择功能

v-model绑定checkbox

我们来看一下v-model绑定checkbox：单个勾选框和多个勾选框

• 单个勾选框：v-model即为布尔值。此时input的value并不影响v-model的值。
• 多个复选框：当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。当选中某一个时，就会将input的value添加到数组中。

v-model绑定radio

v-model绑定radio，用于选择其中一项；

v-model绑定select

和checkbox一样，select也分单选和多选两种情况。

• 单选：只能选中一个值，v-model绑定的是一个值。当我们选中option中的一个时，会将它对应的value赋值到fruit中；
• 多选：可以选中多个值，v-model绑定的是一个数组。当选中多个值时，就会将选中的option对应的value添加到数组fruit中；