持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第20天，点击查看活动详情juejin.cn/post/714765…
vue表单输入绑定
在前端处理表单时，我们常常需要将表单输入框的内容同步给js中相应的变量，手动连接值绑定和更改事件监听器可能会很麻烦。
要通过v-bind绑定相应数据，通过自定义input事件传入event事件返回表单实时输入的value值。
v-model指令帮我们简化了这一步骤：
另外，v-model还可以用于各种不同类型的输入，textarea,select元素，它会根据所使用的元素自动对应DOM属性和事件结合。
- 文本类型的input和textarea元素会绑定value property并侦听input事件；
- input type='checkbox和input type='radio'会绑定checked property并侦听change事件
- select会绑定value property并侦听change事件；
注意：v-model会忽略任何表单元素上初始的value、checked或selected attribute。它将始终将当前绑定的js状态视为数据的正确来源。应该在js中使用data选项来声明该初始值。
v-model的基本用法
文本：
多行文本：
注意：多行文本textarea中是不支持插值表达式的。请使用v-model来替代：
复选框
有两种情况：单一的复选框，绑定的是布尔值：
如果是多个复选框的话，可以将多个复选框绑定到同一个数组或集合：
value值要与内容一致。输出的时候才会输出一致。
单选按钮
选择器
多选（值绑定到一个数组）
选择器的选项可以使用v-for动态渲染
值绑定
对于单选按钮、复选框和选择器选项，v-model绑定的值通常是静态的字符串（或者对复选框是布尔值）
但有时候我们希望将该值绑定到当前组件实例上的动态数据，这可以通过使用v-bind来实现。此外，使用v-bind还使我们可以将选项值绑定为非字符串的数据类型。
动态：
组件上的v-model
vue2中用在组件上的v-model展开的话如下：
但vue3中v-model用在组件上，展开是这样的：
所以按照之前那样拿值和传值是无法正常干工作的，需要做两件事情才能成功：
- 将内部原生input元素的value属性绑定到modelValue props
- 输入新的值时在input元素上触发update.modelValue事件
代码如下：
