使用Bootstrap + Vue.js实现 添加删除数据
界面首先需要引入bootstrap的css和vue.js,jQuery.js才可以看见效果。
这里提供bootstrap的在线文件给大家引用:
<!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
效果如下图所示,输入用户名和年龄,点击添加,数据会自动添加到下面的用户信息表内。当没有数据时,用户信息表显示:暂无数据……,当有数据时,显示 删除全部 按钮,这里为了方便快捷,我没有做删除按钮的弹出框,所以 点击删除按钮 会直接删除掉当前这条数据。
<div class="container" id="box"><form role="form"><div class="form-group"><label for="username">用户名:</label><input type="text" id="username" class="form-control" placeholder="请输入用户名" v-model="username" /></div><div class="form-group"><label for="age">年龄:</label><input type="text" id="age" class="form-control" placeholder="请输入年龄" v-model="age" /></div><div class="form-group"><input type="button" value="添加" class="btn btn-primary" v-on:click="add()" /><input type="reset" value="重置" class="btn btn-danger" /></div></form><hr><table class="table table-bordered table-hover"><caption class="text-center">用户信息表</caption><tr class="text-danger"><th class="text-center">序号</th><th class="text-center">名字</th><th class="text-center">年龄</th><th class="text-center">操作</th></tr><tr class="text-center" v-for="(item, index) in myData"><td>{{index+1}}</td> <td>{{item.name}}</td><td>{{item.age}}</td><td><button class="btn btn-primary btn-sm" v-on:click="deleteMsg(index)">删除</button></td></tr><tr v-show="myData.length!==0"><td colspan="4" class="text-right"><button class="btn btn-danger" v-on:click="all()">删除全部</button></td></tr><tr v-show="myData.length==0"><td colspan="4" class="text-center text-muted"><p>暂无数据……</p></td></tr></table></div>
window.onload = function(){new Vue({el:"#box",data:{myData:[],username:'',age:''},methods:{add:function(){this.myData.push({name:this.username,age:this.age});this.username='';this.age='';},deleteMsg:function(index){this.myData.splice(index,1) },all:function(){this.myData = [];}}})}
如果我的内容对你有帮助,欢迎打赏
转载于:https://www.cnblogs.com/hezihao/p/6445840.html
使用Bootstrap + Vue.js实现 添加删除数据相关推荐
- html页面数字滚动,Vue.js大屏可视化数据数字滚动翻转跳转效果(通俗易懂附完整代码)...
原文:Vue.js大屏可视化数据数字滚动翻转跳转效果(通俗易懂附完整代码) 大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果 ...
- html中下拉列表监听事件,ExtJS 下拉框监听事件、日期选择器监听事件、实现动态给items添加删除数据...
本文将为您描述ExtJS 下拉框监听事件.日期选择器监听事件.实现动态给items添加删除数据,具体实现方法: 1.下拉框 下拉框选择时,触发事件的方法: 在 Ext.form.ComboBox 组件 ...
- vue.js 组件之间传递数据 1
vue.js 组件之间传递数据 框架 浏览数:437 2017-8-21 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据 ...
- Vue.js render函数的数据双向绑定
在Vue.js render函数中数据双向绑定较为复杂.
- js删除与php后台交互,js动态添加删除,后台取数据(示例代码)_javascript技巧
环境描述:就像你一般在论坛上发表文章,可能带附件,附件的数量是你手动添加删除的!! /********************************************************* ...
- vue.js 组件之间传递数据
前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关 ...
- mysql约束添加删除数据_mysql中约束的添加,修改,与删除
MySQL中的约束,添加约束,删除约束,以及其他的一些修饰: 一.NOT NULL(非空约束) 添加非空约束 1)建表时直接添加 CREATE TABLE t_user(user_id INT(10) ...
- vue项目中表格删除数据页码显示注意点
在做管理系统的过程中,想必大家都接触过表格的增删改查吧,最近我在项目中发现,对于表格删除和批量删除时,有个细节项目组的前端开发并没有注意到,显然也没有去处理,测试人员居然也没去测试这个场景. 当我们表 ...
- onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法(vue上监听scroll事件
在vue.js中直接使用onscroll不起作用 利用DOM二级监听事件即可, window.addEventListener('scroll',()=>{console.log(window. ...
最新文章
- 难搞的偏向锁终于要被Java移除了
- ogg mysql的原理_OGG基础原理了解
- linux系统中 库分为静态库和,你知道linux 静态库和共享库?
- 最小二乘算法MATLAB代码实现
- SQL Server 性能调优(方法论)
- POJ - 2559 Largest Rectangle in a Histogram(笛卡尔树,单调栈实现)
- Classpath entry org.eclipse.m2e.MAVEN2_CLASSPATH_CONTAINER will not be exported or published. Runtim
- 应用程序范围的键值对
- Python处理Excel文档之openpyxl (三)简单的使用
- 2021最新 上海互联网公司排名
- STL emplace_back
- C#--解析DataMatrix二维码
- pyppeteer和selenium远程操控浏览器
- input自动填充后背景颜色被覆盖的问题
- Vue使用微信录音并上传服务端
- ping ,time,TTL详解
- 【RF】【元素定位】 Other element would receive the click
- 【错误解决】SpringBoot邮件服务的一些错误及其解决方案
- 罗克韦尔自动化荣膺“2019全球最具商业道德企业”,这是该公司第11年上榜
- vue 当前路由重复点击跳转报错