index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Vue -->

    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>

    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>

    <body>

        <div id="app">

            <div v-for="(v,i) in list">

                <input v-model="list[i].a"></input>

                <select v-model="list[i].b">

                    <option disabled value="">Please select one</option>

                    <option value='1'>A</option>

                    <option value='2'>B</option>

                    <option value='3'>C</option>

                </select>

                <button @click="handleDel"> X </button>

            </div>

            <button @click="handleClick">添加一行</button>

            <button @click="handleSublimt">提交</button>

        </div>

    </body>

    <script>

        // Vue

        new Vue({

            el: '#app',

            data: {

                selected: '',

                list: [

                  {a: '', b: ''},

                  {a: '', b: ''},

                  {a: '', b: ''}

                ]

            },

            methods: {

                handleClick () {

                    this.list.push({a: '', b: ''})

                },

                handleSublimt () {

                    console.log(20180726102759, this.list)

                },

                handleDel (e) {

                    // 这就是使用jquery的好处，这里看情况，不一定只是parent，也可能是parents(xxxx)

                    var index = $(e.target).parent().index()

                    // 删除索引

                    this.list.splice(index, 1)

                }

            }

        })

    </script>

</html>

Vue 最传统的新增行，删除行，提交的数据整合的更多相关文章

  1. C# GridView弹出窗口新增行 删除行

    <%@ Page Language="C#" AutoEventWireup="true" EnableViewState="true" ...

  2. jqgrid 编辑行、新增行、删除行、保存行

    编辑行:$("#jqGrid").jqGrid('editRow', rowKey); 删除行:$("#jqGrid").delGridRow(rowKey); ...

  3. [代码质量] Git统计本次提交新增代码行数，建议每个评审commit新增行数小于400行

    git log HEAD~1..HEAD --author="$(git config --get user.name)" --pretty=tformat: --numstat ...

  4. pytest文档59-运行未提交git的用例(pytest-picked)

    前言 我们每天写完自动化用例后都会提交到 git 仓库,随着用例的增多,为了保证仓库代码的干净,当有用例新增的时候,我们希望只运行新增的未提交 git 仓库的用例. pytest-picked 插件可 ...

  5. javaScript之表格操作<一:新增行>

    DOM表格系列操作 /** * 添加表格行 * @function 本接口可以用于:在表格tbody部分新增任意数量,任意样式的行HTML结构; * @name addTableLines * @au ...

  6. DataGridView使用技巧三：不显示最下面的新行、判断新增行

    一.DataGridView不显示下面的新行 通常DataGridView的最下面一行是用户新追加的行(行头显示*).如果不想让用户新追加行即不想显示该新行,可以将DataGridView对象的All ...

  7. git blame 查看某行代码提交记录

    1. 在当前git项目目录下执行 git blame -L 38,38 <filename> 例子:  git blame -L 38,38 src/component/BarCode/i ...

  8. [K/3Cloud] 分录行复制和新增行的冲突如何处理

    新增行:执行AfterCreateNewEntryRow,这个函数里面对一些数据进行处理(比如字段给上默认值): 复制行:复制行过程中希望这些字段能够得到我修改行信息后的数据,如果不处理,执行到Aft ...

  9. Http协议详解，获取doPost，doGet提交的数据，以及编码问题

    一 什么是Http协议 http协议: 浏览器客户端 和  服务器端 之间数据传输的格式规范 二 如何查看Http协议的内容 1)使用火狐的firebug插件(右键->firebug->网 ...

随机推荐

  1. C++初始化列表和大括号中构造的差别

    C++的对象构造函数有两种初始化的方法: 1.初始化列表 2.大括号中面赋值 这两种推荐使用另外一种.原因在于使用初始化列表仅仅须要进行一次初始化.而使用大括号内赋值的话首先须要调用默认构造函数初始化 ...

  2. Win10 Docker 安装使用

    1.前言 Docker最近推出了可以运行在Win10和Mac上的稳定版本,让我们赶紧来体验一下. 2.安装准备 需要的条件为: 64bit Windows 10,开启Hyper-V 2.1 下载Doc ...

  3. Systemd 三部曲 之 PHP7

    安装编译php7时需要的依赖包 : yum -y install libxml2 libxml2-devel openssl openssl-devel curl-devel libjpeg-deve ...

  4. Oracle根据字段值找到表名和列名

    方法1: --Oracle 根据字段值查询其所在的表.字段 DECLARE CURSOR cur_query IS SELECT table_name, column_name, data_type ...

  5. 【Window OS】”对于目标文件系统，文件XXXXX过大“导致无法进行文件操作的解决方法

    问题原因:这是目标文件系统不支持这么大的文件的操作问题.例如:目标文件系统的格式是FAT32,FAT32最大支持4G,如果你要进行发送或粘贴4G以上的文件就会出现这个问题. 解决办法:把目标文件系统的 ...

  6. 如何使用SubtitleWorkshop制作字幕

    任意打开一段字幕文件 对于初学者而言还是最好打开一个带有中英字幕的视频文件(字幕是嵌入在视频文件里面的)然后一句一句照着写 先打开视频预览模式 再打开一段视频文件,并新建一个字幕文件 牢记几个快捷键 ...

  7. ASP.NET伪静态

    http://www.duote.com/tech/5/14543.html 三.伪静态的坏处 当然犹如一篇文章的作者所说的:"如果流量稍大一些使用伪静态就出现CPU使用超负荷,我的同时在线 ...

  8. VMware vSphere学习之手动克隆虚拟机

    VMware ESxi5.0中,在没有安装VMware vCenter server虚拟机管理器的情况下,vSphere Client是没有提供克隆选项的. 但是还是有以下方法可以通过vSphere ...

  9. ora01219数据库未打开

    今天连接数据后,一看提示ora01219数据库未打开,关了服务重开仍然是这样,在度娘找了下才发现问题 应该是我删除了一个数据文件,看下解决办法 错误原因: 直接关闭数据库,然后删除DBF文件.即表空间 ...

  10. Node使用淘宝 NPM 镜像

    npm install -g cnpm --registry=https://registry.npm.taobao.org之后可以通过cnpm来安装node模块cnpm install [name]