Vue.js实现表格动态增加删除的方法（附源码下载）

2019-11-19 17:51:14

字体：大中小

来源：转载

供稿：网友

Vue.js

Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。

先来看看实现的效果：

下面的例子会用到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> //创建一个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){      // 删一个数组元素      this.people.splice(index,1);     }    }   }) </script> </html>

下载地址请点击这里

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

上一篇：原生js实现新闻列表展开/收起全文功能

下一篇：node.js与C语言实现遍历文件夹下最大的文件，并输出路径，大小