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 相关文章推荐
自适应高度框架 ----属个人收藏内容
Jan 22 Javascript
jquery对复选框(checkbox)的操作汇总
Jan 13 Javascript
用JS写的一个Ajax库(实例代码)
Aug 06 Javascript
jQuery学习笔记之回调函数
Aug 15 Javascript
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
node.js部署之启动后台运行forever的方法
May 23 Javascript
JavaScript事件委托原理与用法实例分析
Jun 07 Javascript
解决layer.msg 不居中 ifram中的问题
Sep 05 Javascript
Vue双向数据绑定(MVVM)的原理
Oct 03 Javascript
详解TypeScript中的类型保护
Apr 29 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调整服务器时间的方法
2015/04/03 PHP
php车辆违章查询数据示例
2016/10/14 PHP
详解PHP数据压缩、加解密(pack, unpack)
2016/12/17 PHP
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
angularjs基础教程
2014/12/25 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
JavaScript判断undefined类型的正确方法
2015/06/30 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
Webpack打包css后z-index被重新计算的解决方法
2017/06/18 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
2017/11/30 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
Angular使用动态加载组件方法实现Dialog的示例
2018/05/11 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
Vue实现图片与文字混输效果
2019/12/04 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
2020/02/03 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
利用python获得时间的实例说明
2013/03/25 Python
Python中的迭代器与生成器高级用法解析
2016/06/28 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
Python3 assert断言实现原理解析
2020/03/02 Python
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
销售冠军获奖感言
2014/02/03 职场文书
农村结婚典礼司仪主持词
2014/03/14 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
全国劳模先进事迹材料(2016精选版)
2016/02/25 职场文书
Spring整合Mybatis的全过程
2021/06/28 Java/Android
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers