Vue.js实现的表格增加删除demo示例
本文实例讲述了Vue.js实现的表格增加删除demo。分享给大家供大家参考，具体如下：
Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。
使用本站在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun，得到如下所示的运行效果：
具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js小demo</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="external nofollow" >
<style>
label{float:left;line-height: 34px;}
.panel-body{
margin:30px auto;
}
</style>
</head>
<body>
<!-- 这是我们的view -->
<div class="col-md-6">
<div class="panel panel-default" id="app" >
<div class="panel-body">
<div class="form-group">
<label class="col-md-2 control-label">Name：</label>
<input type="text" class="col-md-9 form-control" v-model="newPerson.name"/>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Age：</label>
<input type="text" class="col-md-9 form-control" v-model="newPerson.age">
</div>
<div class="form-group">
<label class="col-md-2 control-label">Sex：</label>
<select class="col-md-9 form-control" v-model="newPerson.sex">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="form-group">
<label class="col-md-8"></label>
<button class="col-md-3" @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 v-on:click="delPerson($index)">Delete</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.2.6/vue.js"></script>
<script>
//创建一个Vue实例或"ViewModel",它连接view与model
var vm = new Vue({
el: '#app',
data: {
newPerson: {
name: '',
age: '',
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: '', sex: 'Male'}
},
delPerson: function(index){
// 删一个数组元素
this.people.splice(index,1);
}
}
});
</script>
</html>
希望本文所述对大家vue.js程序设计有所帮助。
相关推荐
-
vue实现消息的无缝滚动效果的示例代码
朋友的项目里要实现一个消息无缝滚动的效果,中途遇到了一点小bug,每组消息滚动完再次循环时会出现停留两倍的时间间隔问题,我研究了一天终于解决了这个1S的小问题 项目环境vue-cli ,请自行配置好相应的,环境及路由,这里主要介绍实现的方法 第一步在模板中 使用v-for方法循环出消息列表 <template> <div id="box"> <ul id="con1" ref="con1" :class="
-
vue.js树形组件之删除双击增加分支实例代码
html代码: <script type="text/x-template" id="item-template"> <li> <div :class="{bold: isFolder}" @click="toggle"> {{model.name}} <span v-if="isFolder">[{{open ? '-' : '+'}}]</span&
-
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
在开发web-app中,总会遇到v-for出来的li会有很多,当数据达几百上千条的时候,一起加载出来会造成用户体验很差的效果. 这时候我们可以使用无限滚动和下拉刷新来实现控制显示的数量,当刷新到底部的边界的时候会触发无限滚动的事件,再次加载一定数量的条目. 还是拿在项目中的功能来举栗子介绍. 有个列表,几千条数据,做分页查询,限制每次显示查询20条,每次拉到最后20条边缘的时候,触发无限滚动,这时候会出现加载图标,继续加载后续20条数据,加载到最后的时候会提示数据"加载完毕". 项目的
-
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
-
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无限滚动加载不需要写首次载入列表的函数, 代码如下: html: //父组件 <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance=
-
使用vue制作FullPage页面滚动效果
前言 已经有好久没有更新博客了,大三下了要准备找实习了,才发现自己很多东西都不会,所以赶紧找了个现在流行的MVVM框架学习一下.我学习的是Vue,所以拿Vue写了一个FullPage的模板,可以供自己和其他人使用. 项目的地址是:https://github.com/hzxszsk/vue-fullpage 项目讲解 为了加深理解,我把我制作这个FullPage页面的思路和流程记录下来,也可以给其他和我一样的初学者一个参考. 分解思路 首先,我根据Vue的组件开发思想,把这个FullPage页面
-
vue滚动轴插件better-scroll使用详解
跟做慕课网的vue高仿外卖项目中用到了一个很好用的插件BScroll,用来计算左侧menu栏对应右侧foods栏相应显示的食物区,如果不用插件就比较费事了,因此这里分享一下这个插件的简单使用: 一.项目中下载,并引入 在配置文件package.json中引入版本 "dependencies": { "better-scroll": "^0.1.7" } 然后进入项目目录,打开cmd更新配置 npm i (i是install缩写) 最后引入,比如我
-
vue利用better-scroll实现轮播图与页面滚动详解
前言 better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图.picker 等等...所以本文主要给大家介绍了关于vue用better-scroll实现轮播图与页面滚动的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 1.安装better-scroll 在根目录中package.json的dependencies中添加: "better-scroll": "^0.1.15" 然后 npm i 安装. 2.封装代码
-
vue 实现数字滚动增加效果的实例代码
项目中需要做数字滚动增加的效果,一开始很懵,研究了一下原理,发现很简单,贴出来分享一下 ^_^ 数字滚动组件: <template> <div class="number-grow-warp"> <span ref="numberGrow" :data-time="time" class="number-grow" :data-value="value">0</sp
-
Vue.js实现的表格增加删除demo示例
本文实例讲述了Vue.js实现的表格增加删除demo.分享给大家供大家参考,具体如下: Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 使用本站在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun,得到如下所示的运行效果: 具体代码如下: <!DOCTYP
-
vue element实现表格增加删除修改数据
本文实例为大家分享了vue element实现表格增加删除修改数据的具体代码,供大家参考,具体内容如下 这里用到是设置一个弹出框来实现此功能,还有一种方法是直接在原来的基础上面进行修改 效果如下: 表格的table: <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width=&q
-
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前端网页弹框异步行为示例分析
目录 1. 序 2. 找两个弹框组件看看 3. 自己肝一个 3.1. 封装 Promise 3.2. 确定时允许异步等待 3.3. 细节完善 3.4. 改革 1. 序 网页弹框是个很常见的功能,比如需要告知用户消息的时候 (Alert),需要用户进行确认的时候 (Confirm),需要用户补充一点信息的时候 (Prompt) -- 甚至可以弹框让用户填写表单 (Modal Dialog). 弹框之后,开发者需要知道这个弹框是什么时候关闭以便进行接下来的操作. 在比较古老的 UI 组件中,这个事情
-
vue.js 使用axios实现下载功能的示例
本文主要来源于知乎一个回答,这里红色部分做了自己的处理,虽然自己的少,可是很有用的几句代码哦 只好回答一下axios如何拦截get请求并下载文件的了. Ajax无法下载文件的原因 浏览器的GET(frame.a)和POST(form)请求具有如下特点: response会交由浏览器处理 response内容可以为二进制文件.字符串等 Ajax请求具有如下特点: response会交由Javascript处理 response内容仅可以为字符串 因此,Ajax本身无法触发浏览器的下载功能. Axi
-
Vue ELement Table技巧表格业务需求实战示例
目录 前言 常见业务 需求:合并行 思路分析 需求合并列 思路分析 前言 在我们日常开发中,表格业务基本是必不可少的,对于老手来说确实简单,家常便饭罢了,但是对于新手小白如何最快上手搞定需求呢?本文从思路开始着手,帮你快速搞定表格. 常见业务 需求:合并行 1. 合并条码一样的两行 2. 触摸高亮关闭,表格颜色重一点 思路分析 调取element Table的回调 通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row.当前列column.当
-
VUE JS 使用组件实现双向绑定的示例代码
1.VUE 前端简单介绍 VUE JS是一个简洁的双向数据绑定框架,他的性能超过ANGULARJS,原因是实现的机制和ANGULARJS 不同,他在初始化时对数据增加了get和set方法,在数据set时,在数据属性上添加监控,这样数据发生改变时,就会触发他上面的watcher,而ANGULARJS 是使用脏数据检查来实现的. 另外VUEJS 入门比ANGULARJS 简单,中文文档也很齐全. 2.组件实现 在使用vue开发过程中,我们会需要扩展一些组件,在表单中使用,比如一个用户选择器. 在VU
-
Vue.js组件间的循环引用方法示例
什么是组件: 众所周知组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展.下面话不多说了,来一起看看本文的正文内容. 引言 写了大大小小不少基于vue的项目,但是基本没用到过组件循环引用的知识. 为了查缺补漏,照着官方文档撸一个DEMO:组件之间的循环引用 本人的运行版本为 vue-cli@2.8.1,启用项目后,将以下 js 文件
-
jQuery+vue.js实现的多选下拉列表功能示例
本文实例讲述了jQuery+vue.js实现的多选下拉列表功能.分享给大家供大家参考,具体如下: 其实就是实现一个多选下拉列表,然后将选中的选项显示到相应的位置: 因为主要是jQuery选中行为的实现,所以,样式结构就不多说啦,直接贴代码啦: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpo
-
vue.js Router中嵌套路由的实用示例
前言 随着 Vue.js 单页应用(SPA)变得相当复杂,你开始需要 Vue 路由以及嵌套路由.嵌套路由允许更复杂的用户界面以及相互嵌套的组件.让我们创建一个相对简单的用例,来展示 Vue Router 中嵌套路由的实用性. 用 Vue CLI 进行设置 如果尚未安装,请运行以下命令全局安装 Vue CLI: $ npm install -g @vue/cli 或者 $ yarn global add @vue/cli 现在你能从命令行运行 vue 命令了.让我们创建一个名为 alligator