vue 实现动态增加输入框_Vue 中实现动态增减输入框 / 选择器等表单输入元素

前言

在做前端开发过程中，我们经常会遇到这样的需求：要求动态增减输入框、下拉选择等输入元素(如下图)。

如果是Vue新手的话可能会疑惑：“我一个 input 输入框或者 select 下拉选择只能绑定一个 v-model，如果动态增减，我们都不知道总共有多少个或者多少组输入元素，我们应该如何处理动态的 v-model 呢？”

解决思路

使用数组作为状态数据，然后把单个 / 或者单组输入元素封装为 Vue 子组件。面对这种动态增减输入元素的处理方式一般我们是化繁为简。单个 / 单组输入元素封装为单个 Vue 组件后，在组件里面我们就可以愉快地给每个元素定义一个 v-model 来处理了，我们还可以给组件外暴露属性 props 和事件 events 供外部调用。动态增减的处理也相对简单，就维护一个数组，数组里面每条数据对应一个上面定义的 Vue 组件；这样，对数组进行增删改，直接更新到组件视图。

组件实现代码

这里以一个简单的 elementUI 输入框为例

{ { label }}

:class="{'last': isLastItem}"

class="right panel__input"

>

v-model="value"

size="s