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


Posted in Javascript onJanuary 20, 2017

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>

下载地址请点击 这里

总结

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

Javascript 相关文章推荐
popdiv
Jul 14 Javascript
js将控件隐藏的方法及display属性介绍
Jul 04 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 Javascript
学习JavaScript事件流和事件处理程序
Jan 25 Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 Javascript
jQuery动态修改字体大小的方法【测试可用】
Sep 09 Javascript
jquery popupDialog 使用 加载jsp页面的方法
Oct 25 Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 Javascript
angular多语言配置详解
May 16 Javascript
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
Jan 20 #Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 #Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
Jan 20 #Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 #Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 #Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
Jan 20 #Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 #Javascript
You might like
PHP日期处理函数 整型日期格式
2011/01/12 PHP
PHP实现的连贯操作、链式操作实例
2014/07/08 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
JS完成代码前最好对其做5件事
2013/04/07 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
jquery插件推荐浏览器嗅探userAgent
2014/11/09 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
2016/12/02 Javascript
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
jQuery中DOM节点删除之empty与remove
2017/01/20 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
在vue中实现点击选择框阻止弹出层消失的方法
2018/09/15 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
Python实现手写一个类似django的web框架示例
2018/07/20 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
戴森美国官网:Dyson美国
2016/09/11 全球购物
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
学生自我鉴定模板
2013/12/30 职场文书
大学生未来职业生涯规划书
2014/02/15 职场文书
《长征》教学反思
2014/04/27 职场文书
旅行社优秀创业计划书
2014/08/16 职场文书
学校安全工作汇报材料
2014/08/16 职场文书
交通工程专业推荐信
2014/09/06 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
水电工程师岗位职责
2015/02/13 职场文书
2015年前台接待工作总结
2015/05/04 职场文书