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

网络编程 2024/11/15 佚名

3 2 1

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="/UploadFiles/2021-04-02/vue.js">

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

vue.js,表格,vue.js,动态增加属性,vue.js,列表,删除选择

标签：