Vue 中的表单收集中数据双向绑定

原理： 数据的双向绑定（ v-model ） 实现；

• 对于输入框，直接收集的是用户输入的 value 值
• 对于单选 radio 控件，收集给标签配置的 value 值（同一组 radio 控件使用 name 分组）
• 对于多选 checkbox 控件：
  • 没有配置 input 的 value ，则收集的是是否勾选情况 checked （一般为勾选 true 或者未勾选 false ）；
  • 对于 input 有配置 value 值，则收集的是 value 组成的数组；（⚠️ 绑定的 data 也要为数组类型）；

v-model 中的三个修饰符：

• trim ：对输入字符串的「首尾空格字符」过滤；
• number ：对输入字符串转为有效数字（一般配合 input 的类型为 number 使用）（对于 3a0 只取 3 ）；
• lazy ：当对当前表单控件失去焦点时才会收集数据（常用于长文字 textarea 收集）；

🍞 更多使用表单控件的例子查看官网文档：表单输入绑定 — Vue.js (vuejs.org) (opens new window)

生成对象的标识 id

可选择使用 uuid ，精简版时使用 nanoid

安装 nanoid ：

$ npm i nanoid

引入 nanoid 库：

import {nanoid} from 'nanoid'

使用 nanoid ，在要用的属性值中使用 nanoid() ，如： id: nanoid() ;