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

2024-10-20 21:18:11

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>

下载地址请点击这里

总结

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

Vue.js实现多条件筛选、搜索、排序及分页的表格功能

与上篇实践教程一样,在这篇文章中,我将继续从一种常见的功能--表格入手,展示Vue.js中的一些优雅特性.同时也将对filter功能与computed属性进行对比,说明各自的适用场景,也为vue2.0版本中即将删除的部分filter功能做准备. 需求分析还是先从需求入手,想想实现这样一个功能需要注意什么.大致流程如何.有哪些应用场景. 表格本身是一种非常常用的组件,用于展示一些复杂的数据时表现很好. 当数据比较多时,我们需要提供一些筛选条件,让用户更快列出他们关注的数据. 除了预设的一些筛选条
vue.js+Element实现表格里的增删改查

新项目使用的是vue.js 后来发现饿了吗前端编写的一套框架Element (http://element.eleme.io/#/zh-CN)来配合vue.js进行样式填充之前用过angularjs 用到后来发现越来越难学于是就决定用vue.js 下面就介绍一下vue.js应用在表格里的增删改查首先引入一下element的js <script src="plugins/element-ui/index.js"></script> 然后引入需要用到的vue
vue.js表格组件开发的实例详解

前言组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件开发的基础组件可以扩展 HTML 元素,封装可重用的代码.我理解为功能模块的模板吧. 对于vue来说,组件是这个样子的,我们在html里面写 <div id="example"> <my-compone
vue.js 表格分页ajax 异步加载数据

Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理. 1.注册一个组件 js Vue.component('pagination',{ template:'#paginationTpl', replace:true, props:['cur','all','pageNum'], methods:{ //页码点击事件 btnClick: f
vue.js实现表格合并示例代码

前言由于使用的是vue,想到MVVM是要用数据驱动的思想,所以考虑在Model做手脚,而不是渲染出数据来后做DOM操作,当然基本的CSS还是要有的.因此这个方法对所有数据驱动的框架都有效,比如说Angular和React. 最后的实现效果是这样的: 实现思路原本的正常表格的代码长这样: <tr v-for="item in items"> <td width="3%">{{ $index + 1 }}</td> <td
Javascript vue.js表格分页，ajax异步加载数据

分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理. 效果: 代码: 1.注册一个组件 js Vue.component('pagination',{ template:'#paginationTpl', replace:true, props:['cur','all','pageNum'], methods:{ //页码点击事件 btnClick: function(index){ if(index != this.cu
基于Vue.js的表格分页组件

一.Vue.js简介 1.Vue的主要特点: (1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化 (1) 简洁下面看一段Angular的实现双向绑定的代码 // html <body ng-app="myApp"> <div ng-controller="myCtrl"> <p>{{ note }}</p> <input type="text" ng-
vue.js表格分页示例

分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理. 效果: 代码: 1.注册一个组件 js Vue.component('pagination',{ template:'#paginationTpl', replace:true, props:['cur','all','pageNum'], methods:{ //页码点击事件 btnClick: function(index){ if(index != this.cu
Vue.js实现表格动态增加删除的方法（附源码下载）

Vue.js Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 先来看看实现的效果: 下面的例子会用到bootstrap.min.css以及vue.js,都可以从网上下载(文末有完整源码下载提供). 实例源码 <!DOCTYPE html> <html lang="en"> <head&g
jQuery插件ImageDrawer.js实现动态绘制图片动画（附源码下载）

ImageDrawer.js是一款可以实现动态绘制图片动画的jQuery插件.通过ImageDrawer.js插件,你可以制作在页面中绘制图片的动态过程,你可以控制绘制动画的持续时间等参数,非常有趣. 效果展示源码下载使用方法使用该动态绘制图片插件需要在页面中引入imagedrawer.css,jquery和imagedrawer.js文件. <link rel="stylesheet" href="css/imagedrawer.css"
Dropzone.js实现文件拖拽上传功能(附源码下载)

dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 效果演示源码下载使用Dropzone 我们可以建立一个正式的上传form表单,并且给表单一个.dropzone的class. <form id="mydropzone" action="/upload.php" class="dropzone"&
jQuery插件之Tocify动态节点目录菜单生成器附源码下载

Tocify是一个能够动态生成文章节点目录的jQuery插件.假如我们有一篇很长的文章,文章有多个节点,那么使用Tocify可以根据节点元素动态生成文章目录,点击目录可以平滑滚动到对应的节点,当然当滚动页面时,目录结构会根据当前监听到的节点进行切换到当前目录状态. 效果展示源码下载 Tocify目前支持Twitter Bootstrap和jQueryUI Themeroller两种主题风格,我们可以根据实际项目任选其中一种风格,另外必要条件jQuery 1.7.2+和jQuer
js实现超酷的照片墙展示效果图附源码下载

这是一个超酷的照片墙展示效果,很多照片结合淡入淡出.旋转.缩放.倾斜及3D效果,照片快速从左侧切入,做旋转3D效果,最后在照片墙上整齐排列,为用户展示了超酷的照片墙展示效果. 查看演示下载源码 HTML 本文结合实例给大家分享超酷的照片墙效果,该效果依赖jQuery和easing插件,因此首先载入这两个文件. <script src="jquery.min.js"></script> <script src="jquery.easing.1.3
vue实现的微信机器人聊天功能案例【附源码下载】

本文实例讲述了vue实现的微信机器人聊天功能.分享给大家供大家参考,具体如下: 先看效果: 实现过程: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5模拟微信聊天界面</title> <style> /**重置标签默认样式*/ * { margin: 0; padding: 0; list-style: none; fo
winfrom 打印表格字符串的封装实现代码附源码下载

所以对于应用层用着还不是很方便.最近做一个项目顺便就封装了一个调用默认打印机的类.虽说有几个小bug,但对于目前来说,已经满足需求了.以后不够了在来升级吧. 1,关于打印上下左右边距和纸张的高宽.以往都把这些写死到代码里面.既然是调用默认打印机,打印机的型号自然有差异.所以我就把这些配置放到app.config里面.但又怕每次打印都加载config影响效率.故此设计了个PrintPaper类.里面所有属性都是静态的.还有一个静态的构造方法.这样只有在程序开始运行加载一次config.之后就直接从
VisualStudio2019构建C/C++静态库和动态库dll的问题附源码

1. 静态库和动态库 1.1. 静态链接库举个例子,假如你在编写一个C++工程,根据业务逻辑,这个工程需要用到一些工具类,例如集合操作的工具类(暂且叫他collection_utils),于是你直接定义一个collection_utils.h头文件和一个collection_utils.cpp文件,在头文件中写一些工具函数的定义,在cpp文件中写函数的实现逻辑:如下所示: //---------------collection_utils.h--------------------------
基于JS快速实现导航下拉菜单动画效果附源码下载

这是一个带变形动画特效的下拉导航菜单特效.该导航菜单在菜单项之间切换时,下拉菜单会快速的根据菜单内容的大小来动态变形,显示合适的下拉菜单大小,效果非常棒. 快速的导航下拉菜单动画效果如下所示: 效果演示源码下载 HTML 该导航菜单的HTML结构如下: <header class="cd-morph-dropdown"> <a href="#0" class="nav-trigger">Open Nav&
JS实现快速的导航下拉菜单动画效果附源码下载

这是一个带变形动画特效的下拉导航菜单特效.该导航菜单在菜单项之间切换时,下拉菜单会快速的根据菜单内容的大小来动态变形,显示合适的下拉菜单大小,效果非常棒. 查看演示下载源码 HTML 该导航菜单的HTML结构如下: <header class="cd-morph-dropdown"> <a href="#0" class="nav-trigger">Open Nav<span aria-hidden=&qu

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

相关推荐

随机推荐