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++设计模式实现--模板(Template)模式

    一. 问题 在面向对象系统的分析与设计过程中常常会遇到这样一种情况:对于某一个业务逻辑(算法实现)在不同的对象中有不同的细节实现,可是逻辑(算法)的框架(或通用的应用算法)是同样的.Template提 ...

  2. python 插入数据获取id

    python 插入数据获取id 学习了:https://blog.csdn.net/qq_37788558/article/details/78151972 commit之前获取 cursor.las ...

  3. idea启动崩溃问题

    idea启动崩溃问题 内存已经给到1024m了: 注意到项目比较大,有个参数ReservedCodeCasheSize,把这个修改为1024m, 学习了:https://www.cnblogs.com ...

  4. Linux清理磁盘空间

    1.首先确定是否是磁盘满了 命令:   df -h 参数说明: -a:列出所有的文件系统,包括系统特有的/proc等文件系统 -k:以KB的容量显示各文件系统 -m:以MB的容量显示各文件系统 -h: ...

  5. Linux下C与Mysql的混合编程

    1 概述 MySQL 是一个关系型数据库管理系统.由瑞典MySQL AB公司开发,眼下属于Oracle公司.MySQL是最流行的关系型数据库管理系统. 支持AIX.FreeBSD.HP-UX.Linu ...

  6. Appium Python 六：管理应用和Activity

    管理应用 1. 将当前应用放到后台 执行之后,应用会被放到后台特定时间.比如这里就是5秒,5秒过后,应用会重新回到前台. driver.background_app(5) 官网示例: driver.b ...

  7. 微信小程序 - 各种示例

    示例更新(后续持续更新): 最后一次更新:2018-11-7 小程序-地图显示(调用高德地图.腾讯App) - (2018-11-1) 小程序-上传图片(上传.预览.展示.删除) - (2018-11 ...

  8. php之快速入门学习-6(字符串变量)

    PHP 字符串变量 字符串变量用于存储并处理文本. PHP 中的字符串变量 字符串变量用于包含有字符的值. 在创建字符串之后,我们就可以对它进行操作了.您可以直接在函数中使用字符串,或者把它存储在变量 ...

  9. mac SVN 设置代理

    1. 设置代理一种方法:Finder 菜单里面 -> 前往 -> 前往文件夹 -> /Users/username/.subversion -> 编辑文件 servers 在文 ...

  10. C#编写Windows服务程序 (服务端),client使用 消息队列 实现淘宝 订单全链路效果

    需求: 针对 淘宝提出的 订单全链路 产品接入 .http://open.taobao.com/doc/detail.htm?id=102423&qq-pf-to=pcqq.group oms ...