使用 v-for 指令和数组来实现在 Uni-app 中动态增减表单项并渲染多个数据

  1. 在 data 中定义一个数组,用于存储表单项的数据:
html 复制代码
 
data() {
  return {
    formItems: []
  }
}
  1. 在模板中使用 v-for 指令渲染表单项:
html 复制代码
<template>
  <div>
    <div v-for="(item, index) in formItems" :key="index">
      <input type="text" v-model="item.value">
      <button @click="removeFormItem(index)">删除</button>
    </div>
    <button @click="addFormItem">添加表单项</button>
  </div>
</template>
  1. 在 methods 中定义添加和删除表单项的方法:
html 复制代码
methods: {
  addFormItem() {
    this.formItems.push({ value: '' });
  },
  removeFormItem(index) {
    this.formItems.splice(index, 1);
  }
}

这样,每点击一次 "添加表单项" 按钮,就会新增一个表单项,并且你可以通过输入框的 v-model 来动态修改表单项的值。点击对应的 "删除" 按钮可以移除对应的表单项。

相关推荐
拾年27510 分钟前
520刚过,今天来教你怎么"驾驭"别人的对象
前端·javascript
楷哥爱开发28 分钟前
演唱会自动化抢票如何提高成功率?票务住宅IP与配置指南
服务器·前端·php
发现一只大呆瓜34 分钟前
Vite 兼容降级全解:语法降级、Polyfill 原理与 legacy 插件底层机制
前端·面试·vite
Shirley~~36 分钟前
CC Switch mac安装
前端·ai编程
奇奇怪怪的问题1 小时前
学习ts笔记(二):属性修饰符,泛型,接口
前端·typescript
明月_清风1 小时前
全面了解 Vercel:前端开发者的高效武器库与实战指南
前端·next.js
NiceCloud喜云1 小时前
Claude API PDF 文档问答实战:从原生解析到分页引用的完整方案
java·服务器·前端·网络·数据库·人工智能·pdf
东方小月1 小时前
vibecoding实战:用 Claude Code 从0到1开发一个 Claude Code
前端·人工智能·架构
marsh02061 小时前
54 openclaw钩子函数使用:在框架生命周期中注入自定义逻辑
java·前端·spring
TechExplorer3652 小时前
npm install 日志目录
前端·npm·node.js