新建一个html文件，内容如下：
<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ???<meta http-equiv="X-UA-Compatible" content="IE=edge"> ???<title>form</title> ???<script type="text/javascript" src="js/vue.min.js"></script> ???<style type="text/css"> ???????#table table { ???????????width: 100%; ???????????font-size: 14px; ???????????border: 1px solid #eee ???????} ???????#table { ???????????padding: 0 10px; ???????} ???????table thead th { ???????????background: #f5f5f5; ???????????padding: 10px; ???????????text-align: left; ???????} ???????table tbody td { ???????????padding: 10px; ???????????text-align: left; ???????????border-bottom: 1px solid #eee; ???????????border-right: 1px solid #eee; ???????} ???????table tbody td span { ???????????margin: 0 10px; ???????????cursor: pointer; ???????} ???????.delete { ???????????color: red; ???????} ???????.edit { ???????????color: #008cd5; ???????} ???????.add { ???????????border: 1px solid #eee; ???????????margin: 10px 0; ???????????padding: 15px; ???????} ???????input { ???????????border: 1px solid #ccc; ???????????padding: 5px; ???????????border-radius: 3px; ???????????margin-right: 15px; ???????} ???????button { ???????????background: #008cd5; ???????????border: 0; ???????????padding: 4px 15px; ???????????border-radius: 3px; ???????????color: #fff; ???????} ???????#mask { ???????????background: rgba(0, 0, 0, .5); ???????????width: 100%; ???????????height: 100%; ???????????position: fixed; ???????????z-index: 4; ???????????top: 0; ???????????left: 0; ???????} ???????.mask { ???????????width: 300px; ???????????height: 250px; ???????????background: rgba(255, 255, 255, 1); ???????????position: absolute; ???????????left: 0; ???????????top: 0; ???????????right: 0; ???????????bottom: 0; ???????????margin: auto; ???????????z-index: 47; ???????????border-radius: 5px; ???????} ???????.title { ???????????padding: 10px; ???????????border-bottom: 1px solid #eee; ???????} ???????.title span { ???????????float: right; ???????????cursor: pointer; ???????} ???????.content { ???????????padding: 10px; ???????} ???????.content input { ???????????width: 270px; ???????????margin-bottom: 15px; ???????} ???</style></head><body><div id="table"> ???<div class="add"> ???????<input type="text" v-model="addDetail.title" name="title" value="" placeholder="标题"/> ???????<input type="text" v-model="addDetail.user" name="user" value="" placeholder="发布人"/> ???????<input type="date" v-model="addDetail.dates" name="date" value="" placeholder="发布时间"/> ???????<button @click="adddetail">新增</button> ???</div> ???<table cellpadding="0" cellspacing="0"> ???????<thead> ???????<tr> ???????????<th>序号</th> ???????????<th>标题</th> ???????????<th>发布人</th> ???????????<th>发布时间</th> ???????????<th>操作</th> ???????</tr> ???????</thead> ???????<tbody> ???????<tr v-for="(item,index) in newsList"> ???????????<td width="5%">{{index+1}}</td> ???????????<td>{{item.title}}</td> ???????????<td width="10%">{{item.user}}</td> ???????????<td width="15%">{{item.dates}}</td> ???????????<td width="10%"><span @click="deletelist(item.id,index)" class="delete">删除</span><span class="edit" @click="edit(item)">编辑</span> ???????????</td> ???????</tr> ???????</tbody> ???</table> ???<div id="mask" v-if="editlist"> ???????<div class="mask"> ???????????<div class="title"> ???????????????编辑 ???????????????<span @click="editlist=false">x</span> ???????????</div> ???????????<div class="content"> ???????????????<input type="text" v-model="editDetail.title" name="title" value="" placeholder="标题"/> ???????????????<input type="text" v-model="editDetail.user" name="user" value="" placeholder="发布人"/> ???????????????<input type="date" v-model="editDetail.dates" name="date" value="" placeholder="发布时间"/> ???????????????<button @click="update">更新</button> ???????????????<button @click="editlist=false">取消</button> ???????????</div> ???????</div> ???</div></div><script> ???var app = new Vue({ ???????el: ‘#table‘, ???????data: { ???????????addDetail: {}, ???????????editlist: false, ???????????editDetail: {}, ???????????newsList: [{title: ‘linux系统运维‘, user: ‘林冲‘, dates: ‘2018-02-19‘, id: "1111111111"}, ???????????????{title: ‘python全栈开发‘, user: ‘宋江‘, dates: ‘2018-02-29‘, id: "22222222222"}, ???????????????{title: ‘流畅的python‘, user: ‘黉攟‘, dates: ‘2018-05-09‘, id: "11111112222"}, ???????????????{title: ‘google运维之道‘, user: ‘王力宏‘, dates: ‘2018-09-09‘, id: "3333333333"}, ???????????????{title: ‘有趣的django‘, user: ‘与小白‘, dates: ‘2018-02-09‘, id: "23322445"}], ???????????editid: ‘‘ ???????}, ???????mounted() { ???????}, ???????methods: { ???????????//新增 ???????????adddetail() { ???????????????//这里的思路应该是把this.addDetail传给服务端，然后加载列表this.newsList ???????????????//this.newsList.push(this.addDetail) ???????????????this.newsList.push({ ???????????????????title: this.addDetail.title, ???????????????????user: this.addDetail.user, ???????????????????dates: this.addDetail.dates, ???????????????}) ???????????????//axios.post(‘url‘,this.addDetail).then((res) =>{ ???????????????//若返回正确结果，清空新增输入框的数据 ???????????????//this.addDetail.title = "" ???????????????//this.addDetail.user = "" ???????????????//this.addDetail.dates = "" ???????????????//}) ???????????}, ???????????//删除 ???????????deletelist(id, i) { ???????????????this.newsList.splice(i, 1); ???????????????//这边可以传id给服务端进行删除 ?ID = id ???????????????//axios.get(‘url‘,{ID:id}).then((res) =>{ ???????????????//加载列表 ???????????????//}) ???????????}, ???????????//编辑 ???????????edit(item) { ???????????????this.editDetail = { ???????????????????title: item.title, ???????????????????user: item.user, ???????????????????dates: item.dates, ???????????????????id: item.id ???????????????}; ???????????????this.editlist = true; ???????????????this.editid = item.id ???????????}, ???????????//确认更新 ???????????update() { ???????????????//编辑的话，也是传id去服务端 ???????????????//axios.get(‘url‘,{ID:id}).then((res) =>{ ???????????????//加载列表 ???????????????//}) ???????????????let _this = this ???????????????for (let i = 0; i < _this.newsList.length; i++) { ???????????????????if (_this.newsList[i].id == this.editid) { ???????????????????????_this.newsList[i] = { ???????????????????????????title: _this.editDetail.title, ???????????????????????????user: _this.editDetail.user, ???????????????????????????dates: _this.editDetail.dates, ???????????????????????????id: this.editid ???????????????????????}; ???????????????????????this.editlist = false ???????????????????} ???????????????} ???????????} ???????} ???})</script></body></html>浏览网页如下：
编辑效果
vue.js动态表格增删改代码
原文地址：https://www.cnblogs.com/Black-rainbow/p/9381806.html