Vue 最传统的新增行，删除行，提交的数据整合
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 最传统的新增行，删除行，提交的数据整合的更多相关文章
- C# GridView弹出窗口新增行 删除行
<%@ Page Language="C#" AutoEventWireup="true" EnableViewState="true" ...
- jqgrid 编辑行、新增行、删除行、保存行
编辑行:$("#jqGrid").jqGrid('editRow', rowKey); 删除行:$("#jqGrid").delGridRow(rowKey); ...
- [代码质量] Git统计本次提交新增代码行数，建议每个评审commit新增行数小于400行
git log HEAD~1..HEAD --author="$(git config --get user.name)" --pretty=tformat: --numstat ...
- pytest文档59-运行未提交git的用例(pytest-picked)
前言 我们每天写完自动化用例后都会提交到 git 仓库,随着用例的增多,为了保证仓库代码的干净,当有用例新增的时候,我们希望只运行新增的未提交 git 仓库的用例. pytest-picked 插件可 ...
- javaScript之表格操作<一:新增行>
DOM表格系列操作 /** * 添加表格行 * @function 本接口可以用于:在表格tbody部分新增任意数量,任意样式的行HTML结构; * @name addTableLines * @au ...
- DataGridView使用技巧三：不显示最下面的新行、判断新增行
一.DataGridView不显示下面的新行 通常DataGridView的最下面一行是用户新追加的行(行头显示*).如果不想让用户新追加行即不想显示该新行,可以将DataGridView对象的All ...
- git blame 查看某行代码提交记录
1. 在当前git项目目录下执行 git blame -L 38,38 <filename> 例子: git blame -L 38,38 src/component/BarCode/i ...
- [K/3Cloud] 分录行复制和新增行的冲突如何处理
新增行:执行AfterCreateNewEntryRow,这个函数里面对一些数据进行处理(比如字段给上默认值): 复制行:复制行过程中希望这些字段能够得到我修改行信息后的数据,如果不处理,执行到Aft ...
- Http协议详解，获取doPost，doGet提交的数据，以及编码问题
一 什么是Http协议 http协议: 浏览器客户端 和 服务器端 之间数据传输的格式规范 二 如何查看Http协议的内容 1)使用火狐的firebug插件(右键->firebug->网 ...
随机推荐
- JSON与XML
XML——这种用于表示客户端与服务器间数据交换有效负载的格式,几乎已经成了Web services的同义词.我们知道AJAX技术能够使得每一次请求更加迅捷,对于每一次请求返回的不是整个页面,也仅仅是所 ...
- （转）<Unity3D>Unity3D在android下调试
转自:http://blog.csdn.net/zuoyamin/article/details/11827309 一.工具准备 1.JDK——由于android是基于Java平台开发的,jdk是必须 ...
- 微博推荐算法学习(Weibo Recommend Algolrithm)
原文:http://hijiangtao.github.io/2014/10/06/WeiboRecommendAlgorithm/ 基础及关联算法 作用:为微博推荐挖掘必要的基础资源.解决推荐时的通 ...
- 从servlet中获取spring的WebApplicationContext
需要做一个参数初始化类,当web应用被加载时从数据库里取出相关的参数设置 ,并把这些参数放置到application里,jsp页面可以从中取出. 1.在web.xml中配置: <servlet& ...
- DEDE标签综合
dede: sql标签: sql标签可以称得上是个万能标签了,查询数据库将其输出,这里介绍一些关于这个标签的用法: 1.用来输出统计内容,这个是不错的,举个例子,我们来统计下总共发了多少的文章,思路就 ...
- 火狐浏览器Firefox Firefox中的xpi文件是什么
firefox中的xpi文件是什么? 问一下 最佳答案 XPI是什么? firefox中的xpi实际上类似于IE中的插件或扩展(如Flash插件等). 格式一般为.Zip, 由XUL.Javascri ...
- Java从零开始学三十九(对象序列化)
一.序列化 将对象的状态存储到特定存储介质中的过程 对象序列化,就是把一个对象变为二进制的数据流的一种方法,通过对象序列化可以方便的实现对象的传输或存储. 序列化保存对象的“全景图”,构建对象的“ ...
- java线程(上)Thread和Runnable的区别
首先讲一下进程和线程的区别: 进程:每个进程都有独立的代码和数据空间(进程上下文),进程间的切换会有较大的开销,一个进程包含1--n个线程. 线程:同一类线程共享代码和数据空间,每个线程有独立的运行栈 ...
- 使用轻量级JAVA 爬虫Gecco工具抓取新闻DEMO
写在前面 最近看到Gecoo爬虫工具,感觉比较简单好用,所有写个DEMO测试一下,抓取网站 http://zj.zjol.com.cn/home.html,主要抓取新闻的标题和发布时间做为抓取测试对象 ...
- IE hack 汇总
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...