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 相关文章推荐
用Greasemonkey 脚本收藏网站会员信息到本地
Oct 26 Javascript
jQuery学习3:操作元素属性和特性
Feb 07 Javascript
jQuery 性能优化手册 推荐
Feb 23 Javascript
使用js显示当前时间示例
Mar 02 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
微信小程序 合法域名校验出错详解及解决办法
Mar 09 Javascript
基于JS实现移动端左滑删除功能
Jul 28 Javascript
JavaScript实现短信倒计时60s
Oct 09 Javascript
基于vue 开发中出现警告问题去除方法
Jan 25 Javascript
详解微信小程序开发用户授权登陆
Apr 24 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 Javascript
5个实用的JavaScript新特性
Jun 16 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
discuz 首页四格:最新话题+最新回复+热门话题+精华文章插件
2007/08/19 PHP
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
PHP获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
如何动态的导入js文件具体该怎么实现
2014/01/14 Javascript
Javascript Objects详解
2014/09/04 Javascript
AngularJS入门教程之学习环境搭建
2014/12/06 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
layui实现三级导航菜单
2019/07/26 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
Vue记住滚动条和实现下拉加载的完美方法
2020/07/31 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
Python中使用不同编码读写txt文件详解
2015/05/28 Python
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
Python面向对象特殊成员
2017/04/24 Python
Python跨文件全局变量的实现方法示例
2017/12/10 Python
Python验证文件是否可读写代码分享
2017/12/11 Python
Python将多个excel文件合并为一个文件
2018/01/03 Python
Python列表推导式与生成器表达式用法示例
2018/02/08 Python
浅析python继承与多重继承
2018/09/13 Python
python爬取淘宝商品销量信息
2018/11/16 Python
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
大数据分析用java还是Python
2020/07/06 Python
测绘工程本科生求职信
2013/10/10 职场文书
五型班组建设方案
2014/02/10 职场文书
应聘护士求职信
2014/07/21 职场文书
国际会计专业求职信
2014/08/04 职场文书
慰问信模板
2015/02/14 职场文书
药店收银员岗位职责
2015/04/07 职场文书
走进科学观后感
2015/06/18 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书
高中语文教材(文学文化常识大全一)
2019/08/13 职场文书