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
  })

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

相关文章
|
23小时前
|
JavaScript 前端开发 API
|
23小时前
|
JavaScript 前端开发 网络架构
Vue如何实现页面跳转路由,实现单页面跳转
Vue如何实现页面跳转路由,实现单页面跳转
|
18小时前
|
JavaScript
|
18小时前
|
JavaScript 前端开发
Vue,如何引入样式文件
Vue,如何引入样式文件
|
18小时前
|
JavaScript
|
19小时前
|
JavaScript
Vue搭配ELEMENT之后,右侧点击栏点击跳转到空白页解决方法
Vue搭配ELEMENT之后,右侧点击栏点击跳转到空白页解决方法
|
19小时前
|
JavaScript
vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保 路径正确,然后再试一次。
vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保 路径正确,然后再试一次。
|
23小时前
|
JavaScript
|
23小时前
|
JavaScript 前端开发
|
1天前
|
JavaScript 前端开发 网络架构
技术笔记:vue——介绍和使用
技术笔记:vue——介绍和使用