v-model绑定数组的用法（以动态增减形式的输入框为例）

问题描述在我们的印象中，v-model的用法好像是将数据绑定在一个数据中（例如输入框）。例如下面的常见用法：这会给我们一种错觉，好像v-model绑定了一个数据字符串。其实v-model不仅可以绑定字符串，还可以用v-for绑定数组。比如下面的用法：用Vue的调试工具看一下双向数据绑定效果图：需求如下。下图中的效果图使用了v-model绑定数组的用法。有需求分析的表单，工作项默认有两个输入框。单击添加工作按钮时，可以添加一个输入框。在新添加的输入框左侧（即从第三个输入框开始）有一个可以删除的小图标，点击删除小图标可以删除对应的输入框。当然，表单中的所有输入框都是必须的。不填就做个提示吧。思路分析先放一个el-form结构。以下工作项el-form-item中的el-input循环遍历v-forbookArr，v-model绑定数组中每个项目的值。至于删除小图标，也写了，但是第一和第二个输入框不显示，就是v-show判断，index为0或1时隐藏。点击添加作品时，添加一个item到bookArr中，当点击删除图标时，根据待删除item的索引，通过拼接的方式从第i个位置开始删除一个item。当然，点击确认的时候，要检查一下输入框的内容是否为空。如果为空，系统会提示您。如果所有的输入框都填满了，就可以将输入框的参数作为参数，向后台发送请求。代码步骤html部分js部分CSS部分#app{width:100%;高度：100vh；背景色：rgba(0,0,0,0.3)；显示：弹性；证明内容：居中；对齐项目：居中；.content{宽度：480px；身高：360px；背景色：#fff；边界半径：5px；.contentHeader{宽度：100%；高度：50px；border-bottom:1pxsolid#e9e9e9;框大小：边框框；填充：025px；显示：弹性；证明内容：空格之间；对齐项目：居中；span{字体大小：20px;}i{字体大小：25px；游标：指针；}}.contentBody{溢出-y：自动；宽度：100%；高度：计算（100%-100px）；显示：弹性；证明内容：居中；填充顶部：20px；框大小：边框框；填充右：25px；//对齐项目：居中；.el-form{.itemitem{显示：flex；对齐项目：居中；位置：相对；.dingwei{位置：绝对；左：-30px；顶部：12px；}i{字体大小：20px；右边距：6px；}.el-input{margin-bottom:8px;宽度：206px；}}}}.contentFooter{宽度：100%；高度：50px；行高：50px；border-top:1pxsolid#e9e9e9;文本对齐：居中；死记硬背不如烂笔头，记下来。如果本文的思路对您有所帮助，欢迎您给我点个赞。手动比较