Vue.js實現(xiàn)表格動態(tài)增加刪除的方法（附源碼下載）

更新時間：2017年01月20日 11:21:44 作者：daimomo000

Vue.js通過簡潔的API提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)。在前端紛繁復雜的生態(tài)中，Vue.js有幸受到一定程度的關注，下面這篇文章主要給介紹了Vue.js實現(xiàn)表格動態(tài)增加刪除的方法實例，文末提供了源碼下載，需要的朋友可以參考借鑒。

Vue.js

Vue.js是當下很火的一個JavaScript MVVM庫，它是以數(shù)據(jù)驅動和組件化的思想構建的。相比于Angular.js，Vue.js提供了更加簡潔、更易于理解的API，使得我們能夠快速地上手并使用Vue.js。

先來看看實現(xiàn)的效果：

下面的例子會用到bootstrap.min.css以及vue.js，都可以從網上下載（文末有完整源碼下載提供）。

實例源碼

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>Vue.js小demo</title> 
 <link rel="stylesheet" href="css/bootstrap.min.css"> 
</head> 
<body> 
<!-- 這是我們的view --> 
<div class="col-md-6"> 
 <div class="panel panel-default" id="app" > 
  <div class="panel-body form-horizontal"> 
   <div class="form-group"> 
    <label class="col-md-2 control-label">Name：</label> 
    <div class="col-md-10"> 
     <input type="text" class="form-control" v-model="newPerson.name"/> 
    </div> 
   </div> 
   <div class="form-group"> 
    <label class="col-md-2 control-label">Age：</label> 
    <div class="col-md-10"> 
     <input type="text" class="form-control" v-model="newPerson.age"> 
    </div> 
   </div> 
   <div class="form-group"> 
    <label class="col-md-2 control-label">Sex：</label> 
    <div class="col-md-10"> 
     <select class="form-control" v-model="newPerson.sex"> 
      <option value="Male">Male</option> 
      <option value="Female">Female</option> 
     </select> 
    </div> 
   </div> 
   <div class="form-group"> 
    <label for=""></label> 
    <button class="col-md-offset-2" @click="createPerson">Create</button> 
   </div> 
  </div>  
  <div class="panel-body"> 
 
   <table class="table text-center"> 
    <thead> 
     <tr > 
      <th class="text-center">Name</th> 
      <th class="text-center">Age</th> 
      <th class="text-center">Sex</th> 
      <th class="text-center">Delete</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr v-for="person in people"> 
      <td>{{ person.name }}</td> 
      <td>{{ person.age }}</td> 
      <td>{{ person.sex }}</td> 
      <td><button @click="deletePerson($index)">Delete</button></td> 
     </tr> 
    </tbody> 
   </table> 
  </div> 
 </div> 
</div> 
</body> 
<script src="js/vue.js"></script> 
<script> 
//創(chuàng)建一個Vue實例或"ViewModel",它連接view與model 
 var vm = new Vue({ 
   el: '#app', 
   data: { 
    newPerson: { 
     name: '', 
     age: 0, 
     sex: 'Male' 
    }, 
    people: [{ 
     name: 'Jack', 
     age: 30, 
     sex: 'Male' 
    }, { 
     name: 'Bill', 
     age: 26, 
     sex: 'Male' 
    }, { 
     name: 'Tracy', 
     age: 22, 
     sex: 'Female' 
    }, { 
     name: 'Chris', 
     age: 36, 
     sex: 'Male' 
    }] 
   }, 
   methods:{ 
    createPerson: function(){ 
     this.people.push(this.newPerson); 
     // 添加完newPerson對象后，重置newPerson對象 
     this.newPerson = {name: '', age: 0, sex: 'Male'} 
    }, 
    deletePerson: function(index){ 
     // 刪一個數(shù)組元素 
     this.people.splice(index,1); 
    } 
   } 
  }) 
</script> 
</html>

下載地址請點擊這里

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章: