vue与bootstrap实现简单用户信息添加删除功能


Posted in Javascript onFebruary 15, 2019

本文实例为大家分享了vue与bootstrap实现用户信息添加删除操作的具体代码,供大家参考,具体内容如下

小记:

1.v-model=""    用于input表单双向数据绑定  逻辑层跟渲染层双向绑定

2.v-on:click='add()'     click方法绑定 

3.v-for='(item,index) in myData'   遍历数组  {{index}}      {{item.name}}      {{item.age}}   适用于vue版本2.0  

4.v-for='(item,index,key) in myData'   遍历json  {{index}}      {{item}}      {{key}}   适用于vue版本2.0

5.v-on:click="currentUser=index"    直接绑定点击事件改变逻辑层的数据  currentUser这里是逻辑层的数据 

6.v-show="myData.length!=0"   v-show根据后面的布尔值觉得显示还是隐藏  可直接用逻辑层的数据进行判断

7.<div class="modal" role='dialog' id="layer"> modal  dialog为遮罩框 id用来联系触发元素

8. data-toggle='modal'   交替显示隐藏遮罩框  data-target='#layer'    确定目标模态框

9. data-dismiss='modal'  点击后消失目标元素

效果图:

vue与bootstrap实现简单用户信息添加删除功能

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0" >
 <title>Document</title>
 <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="external nofollow" >
 <script src='../jquery-3.2.1.min.js'></script>
 <script src='bootstrap.js'></script>
 <script src='vue.js'></script>
 <style>
 table td {vertical-align: middle !important;}
 </style>
</head>
<body>
<div class="container">
 
 <form action="" role='form' class="">
 <div class="form-group">
 <label for="username" class="">用户名:</label>
 <input type="text" id="username" class="form-control" v-model="username" placeholder="请输入用户名">
 </div>
 <div class="form-group">
 <label for="age">年 龄:</label>
 <input type="text" id="age" class="form-control" v-model="age" placeholder="请输入年龄">
 </div>
 <div class="form-group">
 <input type="button" value="添加" class="btn btn-primary" v-on:click='add()'>
 <input type="reset" value="重置" class="btn btn-warning">
 </div>
 </form>
 <table class="table table-bordered table-hover">
 <caption class="h4 text-info 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}}</td>
 <td>{{item.name}}</td>
 <td>{{item.age}}</td>
 <td>
 <button class="btn btn-danger btn-xs" data-toggle='modal' data-target='#layer' v-on:click="currentUser=index">删除</button>
 </td>
 </tr>
 <tr v-show="myData.length!=0">
 <td colspan="4" class="text-right">
 <button class="btn btn-danger btn-xs" v-on:click='currentUser="all"' data-toggle='modal' data-target="#layer">全部删除</button>
 </td>
 </tr>
 <tr v-show="myData.length==0">
 <td colspan="4" class="text-center">
 <p class="text-muted">暂无数据...</p>
 </td>
 </tr>
 </table>
 <div class="modal fade bs-example-modal-sm" role='dialog' id="layer">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
  <button class="close" data-dismiss='modal'>
  <span>×</span>
  </button>
  <h4 class="modal-title">确认删除吗?</h4>
 </div>
 <div class="modal-body text-right">
  <button class="btn btn-primary btn-sm" data-dismiss='modal'>取消</button>
  <button class="btn btn-danger btn-sm" data-dismiss='modal' v-on:click="deleteuser()">确认</button>
 </div>
 </div>
 </div>
 </div>
 
 
</div>
</body>
</html>
<script>
 var c = new Vue({
 el:'.container',
 data:{
 myData:[
 {name:"张三",age:20},
 {name:"李四",age:20},
 {name:"王五",age:20},
 ],
 username:"",
 age:"",
 currentUser :-100,
 },
 methods : {
 deleteuser :function(){
 if (this.currentUser == 'all') {
  this.myData = [];
 }else{
  this.myData.splice(this.currentUser,1);
 }
 },
 add : function(){
 if (this.username!=""&&this.age!=0) {
  this.myData.push({
  name:this.username,
  age:this.age
  })
 }
 },
 }
 })
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
原生JavaScript实现连连看游戏(附源码)
Nov 05 Javascript
JavaScript禁止页面操作的示例代码
Dec 17 Javascript
js获取字符串字节数方法小结
Jun 09 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
node.js 发布订阅模式的实例
Sep 10 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
小程序Request的另类用法详解
Aug 09 Javascript
微信小程序实现工作时间段选择
Feb 15 #Javascript
微信小程序实现展示评分结果功能
Feb 15 #Javascript
微信小程序时间标签和时间范围的联动效果
Feb 15 #Javascript
微信小程序实现商品属性联动选择
Feb 15 #Javascript
微信小程序实现购物页面左右联动
Feb 15 #Javascript
微信小程序基于picker实现级联菜单
Feb 15 #Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 #Javascript
You might like
谷歌音乐搜索栏的提示功能php修正代码
2011/05/09 PHP
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
yii分页组件用法实例分析
2015/12/28 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
js setattribute批量设置css样式
2009/11/26 Javascript
JS 跳转页面延迟2种方法
2013/03/29 Javascript
Javascript中的方法链(Method Chaining)介绍
2015/03/15 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
jQuery ajax请求struts action实现异步刷新
2017/04/19 jQuery
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
2018/02/05 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
微信小程序自定义导航栏实例代码
2019/04/05 Javascript
vue实现的请求服务器端API接口示例
2019/05/25 Javascript
使用jQuery实现掷骰子游戏
2019/10/24 jQuery
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
微信小程序实现上传照片代码实例解析
2020/08/04 Javascript
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
python函数定义和调用过程详解
2020/02/09 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
python绘制高斯曲线
2021/02/19 Python
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
办理暂住证介绍信
2014/01/11 职场文书
服务员岗位职责
2014/01/29 职场文书
办公自动化专业大学生职业规划书
2014/03/06 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
2014年人力资源部工作总结
2014/11/19 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js