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 相关文章推荐
Extjs学习笔记之一 初识Extjs之MessageBox
Jan 07 Javascript
zeroclipboard复制到剪切板的flash
Aug 04 Javascript
JQuery学习笔记 nt-child的使用
Jan 17 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
javascript判断数组内是否重复的方法
Apr 21 Javascript
jQuery简单自定义图片轮播插件及用法示例
Nov 21 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
Vue中 key keep-alive的实现原理
Sep 18 Javascript
js刷新页面location.reload()用法详解
Dec 09 Javascript
JavaScript实现拖拽功能
Feb 11 Javascript
Node.js API详解之 net模块实例分析
May 18 Javascript
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中的按位与和按位或操作示例
2014/01/27 PHP
php事务处理实例详解
2014/07/11 PHP
PHP使用redis消息队列发布微博的方法示例
2017/06/22 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
JavaScript 序列化对象实现代码
2009/12/18 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
javascript innerHTML使用分析
2010/12/03 Javascript
解决遍历时Array.indexOf产生的性能问题
2012/07/03 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
跟我学Nodejs(三)--- Node.js模块
2014/05/25 NodeJs
jQuery中nextAll()方法用法实例
2015/01/07 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
2016/10/08 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
webpack配置之后端渲染详解
2017/10/26 Javascript
Django开发中复选框用法示例
2018/03/20 Python
python中字符串数组逆序排列方法总结
2019/06/23 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
Django models filter筛选条件详解
2020/03/16 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
师范生自荐信范文
2013/10/06 职场文书
初中班主任评语
2014/04/24 职场文书
小学教师师德演讲稿
2014/05/06 职场文书
学校募捐倡议书
2014/05/14 职场文书
三好学生个人先进事迹材料
2014/05/17 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
总结会主持词
2015/07/02 职场文书
聘任合同书
2015/09/21 职场文书
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS