Vue 项目动态添加表格或输入框代码与思路！

最新推荐文章于 2024-08-21 17:13:20 发布

weixin_45796807

最新推荐文章于 2024-08-21 17:13:20 发布

阅读量1.2k

点赞数 1

分类专栏： JS vue.js 文章标签： vue js javascript vue.js es6

本文链接：https://blog.csdn.net/weixin_45796807/article/details/113311362

版权

本文介绍了一个在Vue项目中动态添加表格或输入框的实例，通过添加和删除模块来展示动态操作。详细讲解了`methods`中的`addShareLink`和`removeParam`方法，以及如何使用`this.index`跟踪索引，`shareParams`数组存储新增内容，通过`push`添加元素和`splice`删除元素。

摘要由CSDN通过智能技术生成

1、记录实际工作中所需要动态添加的表格或其他内容，先上实现图片。
2、我会对所写代码进行详细解答。
在这里插入图片描述

3、template 模板

	<template>
  <div>
    <div class="itemsg">
      <button class="itemsgList" @click="addShareLink">点击添加</button>
      <el-input
        v-model.trim="data.link"
        placeholder="输入内容"
        size="mini"
        clearable
      />
    </div>

    <!-- 动态添加参数 -->
    <div class="divTwo" v-for="(item, index) in shareParams" :key=