在Vue和iView框架中，动态新增和删除是常见的数据管理功能，特别是在表格或表单中，用户可能需要根据需求动态添加或移除字段。在本案例中，我们将讨论如何利用Vue和iView来实现这一功能。
我们需要了解Vue的基础知识。Vue是一个轻量级的前端JavaScript框架，用于构建用户界面。它提供了声明式的数据绑定和组件化，使得开发更加高效。而iView是基于Vue的UI组件库，提供了丰富的UI组件，如按钮、表单、表格等，方便开发者快速构建美观的界面。
动态新增和删除通常涉及到数组操作和模板渲染。在Vue中，我们可以使用`v-for`指令来遍历数组并渲染列表。例如，这里的`<li>`元素就使用`v-for`来循环显示`capsuleAttr.attrList`数组中的每一项。`v-if`则用于条件渲染，只有当`item.status`为真时，才会显示当前`li`元素。
在表单中，`v-model`用于双向数据绑定，将输入框的值与Vue实例的属性关联。例如，`v-model.trim="item.AttrName"`将输入框的值与`item.AttrName`绑定，并使用`.trim`修饰器去除首尾空格。
对于表单验证，iView的`<FormItem>`组件提供了内置的验证规则。通过`:rules`属性，我们可以设置验证规则，如`required`（必填）、`message`（错误提示信息）、`trigger`（触发验证的事件）等。在例子中，所有的输入框都设置了必须输入的规则，并在失去焦点时触发验证。
动态新增功能可以通过添加新对象到数组来实现。例如，可以定义一个方法`handleAdd`，在其中创建一个新的属性对象并将其添加到`attrList`数组的末尾。这样，Vue会自动更新视图，显示新的输入字段。
删除功能则是从数组中移除特定项。在这个例子中，`handleRemove`方法接收`item`和`index`作为参数，然后从`attrList`中移除对应的对象。为了防止数组下标错乱，建议在删除后对剩余的项重新索引。
此外，代码中还展示了如何处理不同类型的输入，如文本、数字等。例如，`Temperature`字段的验证规则`transform(val) { return String(val)}`确保输入的值始终被转换为字符串类型。
总结来说，Vue和iView实现动态新增和删除的关键在于利用`v-for`指令、`v-model`双向绑定、数组操作以及`<FormItem>`的验证规则。理解这些基本概念和用法，就能有效地在Vue项目中实现动态表单功能。
