vue2.0实现列表数据增加和删除

Z时代
2024-01-10
分类：IT

本文实例为大家分享了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 href="#" @click="delData(index)">删除</a> -->
    <!-- 方法二 -->
    <a href="#" @click="delData(item.id)">删除</a>
   </td>
  </tr>
 </table>
</div>


<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>