vue动态添加数据

简介: vue动态添加数据

1,先声明一个数组为响应式的,里面有一些数据

const tableData = ref([
  {
    sex: '女',
    name: '姓名1',
    birthday:'0512'
  },
  {
    sex: '女',
    name: '姓名2',
    birthday:'0314'
  },
  {
    sex: '男',
    name: '姓名3',
    birthday:'1012'
  },
  {
    sex: '女',
    name: '姓名4',
    birthday:'0915'
  },
]);

我这里用的是表格的,是要动态添加表格

2,获取到需要新增的值

给表单绑定v-model

<el-form :model="form" label-width="120px">
    <el-form-item label="name">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="date">
      <el-input v-model="form.date" />
    </el-form-item>
    <el-form-item label="num">
      <el-input v-model="form.num" />
    </el-form-item>

3,在新增按钮处点击添加往数组里面push相对应的值

tableData.value.push({
    name:form.name,
    date:form.date,
    add:form.num
  })

即可实现动态添加,不过刷新页面数据会恢复如初

目录
相关文章
element-el-time-picker 开始时间-结束时间-回显(整理)
element-el-time-picker 开始时间-结束时间-回显(整理)
|
12月前
|
机器学习/深度学习 数据采集 存储
时间序列预测新突破:深入解析循环神经网络(RNN)在金融数据分析中的应用
【10月更文挑战第7天】时间序列预测是数据科学领域的一个重要课题,特别是在金融行业中。准确的时间序列预测能够帮助投资者做出更明智的决策,比如股票价格预测、汇率变动预测等。近年来,随着深度学习技术的发展,尤其是循环神经网络(Recurrent Neural Networks, RNNs)及其变体如长短期记忆网络(LSTM)和门控循环单元(GRU),在处理时间序列数据方面展现出了巨大的潜力。本文将探讨RNN的基本概念,并通过具体的代码示例展示如何使用这些模型来进行金融数据分析。
1093 2
|
Web App开发 JavaScript 前端开发
Vue上传图片裁剪预览插件vue-img-cutter的使用
Vue上传图片裁剪预览插件vue-img-cutter的使用
677 0
|
存储 Java 数据安全/隐私保护
Java的文件管理系统都有什么?
Java的文件管理系统都有什么?
771 3
|
SQL 人工智能 机器人
AskYourDatabase - 和你的数据库对话
在日益增长的需求下,AI与SQL数据库的有效集成成为关键技术。本文聚焦三大核心点:一是明确应用场景,例如采用AskYourDatabase快速部署SQL聊天机器人;二是选用GPT-4级模型以保障高质量体验;三是高效检索数据库模式,确保在有限上下文中提供精准信息。此外,利用函数调用与代码解释功能生成及执行SQL查询,并实施严格的数据访问控制以保障安全性。通过这些方法,可顺利实现AI与SQL数据库的成功集成。
AskYourDatabase - 和你的数据库对话
|
机器学习/深度学习 算法 数据可视化
Python基于librosa和人工神经网络实现语音识别分类模型(ANN算法)项目实战
Python基于librosa和人工神经网络实现语音识别分类模型(ANN算法)项目实战
|
前端开发
css中如何解决绝对定位元素被遮挡的问题
css中如何解决绝对定位元素被遮挡的问题
946 3
|
Java 开发工具 Maven
java解析apk获取应用信息
请注意,你需要替换"path/to/your/apkfile.apk"为你的APK文件的实际路径。
543 0
|
NoSQL Linux Redis
Centos7 安装和配置 Redis 5 教程
在Centos上安装Redis 5,如果是 Centos8,那么 yum 仓库中默认的 redis 版本就是 5,直接 yum install 即可。
1325 0
|
SQL 关系型数据库 MySQL
MySQL 数据库备份与还原
MySQL 是一款常用的关系型数据库管理系统,用于存储和管理数据。在数据库应用中,数据备份和还原是非常重要的操作,用于保护数据免受意外删除、损坏或数据丢失的影响。本文将详细介绍如何在 MySQL 中进行数据库备份和还原操作,包括常用的备份和还原方法以及相关注意事项。
1879 3