欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-12-28 16:31:18
vue.js vue.js是当下很火的一个javascript mvvm库,它是以数据驱动和组件化的思想构建的。相比于angular.js,vue.js提供了更加简洁、更...

vue.js

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

先来看看实现的效果:

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

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> 

下载地址请点击

总结

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