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. 【Linux】Linux中 “there are stopped jobs”问题的解决方案

    在用管理员执行一个命令后,我用Ctrl+Z把命令转移到了后台天.导致我无法退出root的. 输入命令:logout终端显示:There are stopped jobs. 解决方法:输入命令:jobs ...

  2. linux主机名的修改

    导读 在一个局域网中,每台机器都有一个主机名,便于主机与主机之间的区分,因此为每台机器设置主机名,以容易记忆的方法来相互访问.比如我们在局域网中可以为根据每台机器的功用来为其命名. 查看主机名命令 [ ...

  3. 初探 hexo博客

    近期两天迷上了hexo和gitcafe.最终搭建好了自己的个人主页.以后也能够用那个来写博客啦~直接用的gitcafe的二级域名和server,(gitcafe的server在国外.速度也挺快的),h ...

  4. Android 色彩设计理念

    色彩 色彩从当代建筑.路标.人行横道以及运动场馆中获取灵感.由此引发出大胆的颜色表达激活了色彩,与单调乏味的周边环境形成鲜明的对照. 强调大胆的阴影和高光.引出意想不到且充满活力的颜色. 色样 – 0 ...

  5. Python访问PostGIS(建表、空间索引、分区表)

    #encoding: utf-8 __author__ = 'Administrator' import psycopg2 import ppygis import datetime import s ...

  6. 栈的应用实例——计算后缀表达式

    用户输入一个后缀表达式,程序计算该后缀表达式的值并输出结果: /* postfix_expression.c */ #include "stack.h" #include < ...

  7. Strom优化指南

    摘要:本文主要讲了笔者使用Strom中的一些优化建议 1.使用rebalance命令动态调整并发度 Storm计算以topology为单位,topology提交到Storm集群中运行后,通过storm ...

  8. jsoup抓取豆瓣美女

    package com.huowolf; import java.io.BufferedOutputStream; import java.io.File; import java.io.FileOu ...

  9. Ubuntu12.04+OpenERP6.1更改HTTP端口号为80

    在Ubuntu12.04中安装好OpenERP6.1以后,默认的端口号为8069,如果我们想改变为默认的80端口,可以通过如下方式处理. 1.首先通过iptables进行端口映射转换:sudo ipt ...

  10. github下载源码的三种方式

      从github上下载源码的三种方式 CreationTime--2018年6月7日15点21分 Author:Marydon 1.情景展示 2.实现方式 方式一:直接点击"Downloa ...