山水山水，有山有水才是好风光。夜色越来越浓了，村落啦，树林子啦，坑洼啦，沟渠啦，好象一下子全都掉进了神秘的沉寂里。
本文实例为大家分享了vue2.0实现列表数据增加和删除的具体代码，供大家参考，具体内容如下
css
<style>
[v-cloak]{
display: none;
}
table{
width: 800px;
border-collapse: collapse;
margin: 20px auto;
}
table th,table td{
background: #0094ff;
color: white;
font-size: 16px;
padding: 5px;
text-align: center;
border: 1px solid black;
}
table td{
background: #fff;
color: red;
}
</style>
html
<div id="app">
<input type="text" v-model="id">
<input type="text" v-model="pname">
<button @click="addData">添加</button>
<table>
<tr>
<th>编号</th>
<th>名称</th>
<th>创建时间</th>
<th>操作</th>
</tr>
<tr v-if="list.length == 0">
<td colspan="4">当前列表无数据</td>
</tr>
<tr v-for="(item,index) in list">
<td>{{item.id}}</td>
<td>{{item.pname}}</td>
<td>{{item.ctime}}</td>
<td>
<!-- 方法一 -->
<!-- <a rel="nofollow noopener noreferrer" href="#" @click="delData(index)">删除</a> -->
<!-- 方法二 -->
<a rel="nofollow noopener noreferrer" href="#" @click="delData(item.id)">删除</a>
</td>
</tr>
</table>
</div>
js
<script src="../dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
id: 0,
pname: '',
list: [
{id: 1, pname: '奔驰1', ctime: new Date}
]
},
methods: {
addData(){
// 包装成list要求的对象
var p = {id: this.id, pname: this.pname, ctime: new Date()}
this.list.push(p);
// 清空文本框中的数据
this.id = 0;
this.pname = '';
},
delData: function(index){
if(!confirm('是否要删除当前数据')){
//当用户点击的取消按钮的时候，应该阻断这个方法中的后面代码的继续执行
return;
}
// 方法一
// this.list.splice(index,1);
// 方法二：
// 根据 id 获取要删除的索引，方法一是直接传入删除数组的索引
var index = this.list.findIndex(function(item){
return item.id == index;
});
this.list.splice(index,1);
}
}
});
</script>
效果图
到此这篇关于vue2.0如何实现列表数据增加和删除就介绍到这了。如果你被人恶意攻击，请记住，他们之所以这样做，是为了获得一种自以为重要的感觉。许多人，在骂那些各方面比他们优秀得多的人的时候，都会获得某种满足感。要知道没有人会去踢一条死。更多相关vue2.0如何实现列表数据增加和删除内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
