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. PCL学习笔记二：Registration (ICP算法)

    原文:http://blog.csdn.net/u010696366/article/details/8941938 PCL Registration API Registration:不断调整,把不 ...

  2. 解决Sublime包管理package control 报错 There are no packages available for installation

    解决Sublime包管理package control 报错 There are no packages available for installation 真的是哔了狗了,要不是我机智的重新安装了 ...

  3. java中boolean与字符串或者数字1和0的转换

    mysql有个字段是bit,只存储1和0,是二进制存储,那么在java的dao层如何映射成boolean呢 @Column(name="is_standard") private ...

  4. ystem.Windows.Forms.SplitContainer : ContainerControl, ISupportInitialize

    #region 程序集 System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089 ...

  5. iOS开发系列课程预告

    近期在Mac和iOS上做开发,认为应该写一点东西分享给感兴趣的童鞋们.在此之前.以前有非常多同行们都在埋怨苹果Objective-C的复杂和难以上手,为此也有非常多人对今年(2014年)刚推出的Swi ...

  6. 整数划分问题--DFS

    单点时限:1000ms 内存限制:256MB 描写叙述 Given two positive integers N and M, please divide N into several intege ...

  7. php之快速入门学习-13(PHP 循环 - While 循环)

    PHP 循环 - While 循环 循环执行代码块指定的次数,或者当指定的条件为真时循环执行代码块. PHP 循环 在您编写代码时,您经常需要让相同的代码块一次又一次地重复运行.我们可以在代码中使用循 ...

  8. JSP实现数据保存(web基础学习笔记四)

    session对象: //服务端设置Session属性 session.setAttribute("user", username); //客户端接收Session Object ...

  9. eclipse 代码上传github 笔记

    第一步 先share project 如图所示  第二步 如果所示  第三步 点击 下面的create 然后点击完成  第四步提交  第五步: 第六步: 

  10. Java总结：Java 流(Stream)、文件(File)和IO

    更新时间:2018-1-7 12:27:21 更多请查看在线文集:http://android.52fhy.com/java/index.html java.io 包几乎包含了所有操作输入.输出需要的 ...