使用 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 来动态修改表单项的值。点击对应的 "删除" 按钮可以移除对应的表单项。

相关推荐
EnCi Zheng10 分钟前
M5-markconv自定义CSS样式指南 [特殊字符]
前端·css·python
kyriewen14 分钟前
你的网页慢,用户不说直接走——前端性能监控教你“读心术”
前端·性能优化·监控
广州华水科技15 分钟前
北斗GNSS变形监测在大坝安全监测中的应用与优势分析
前端
前端老石人26 分钟前
前端开发中的 URL 完全指南
开发语言·前端·javascript·css·html
CAE虚拟与现实26 分钟前
五一假期闲来无事,来个前段、后端的说明吧
前端·后端·vtk·three.js·前后端
Sarvartha37 分钟前
三目运算符
linux·服务器·前端
晓晨的博客44 分钟前
ROS1录制的bag包转换为ROS2格式
前端·chrome
Wect1 小时前
LeetCode 72. 编辑距离:动态规划经典题解
前端·算法·typescript
donecoding1 小时前
别再让 pnpm 跟着 nvm 跑了!独立安装终极指南
前端·node.js·前端工程化
GISer_Jing1 小时前
AI全栈转型_TS后端学习路线
前端·人工智能·后端·学习