Vue指令实战：结合bootstrap做一个用户信息输入表格

最新推荐文章于 2020-12-24 20:07:01 发布
最新推荐文章于 2020-12-24 20:07:01 发布
阅读量494 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://yq.aliyun.com/articles/553967
版权

结合前面的vue指令做了个小例子，用户在表单里面输入用户名和年龄，点击“添加”以后会保存到用户信息表里面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
< html >
< head  lang = "en" >
     < meta  charset = "UTF-8" >
     < meta  name = "viewport"  content = "width=device-width, initial-scale=1" >
     < meta  http-equiv = "X-UA-Compatible"  content = "IE=edge" >
     < meta  name = "renderer"  content = "webkit" >
     < link  rel = "stylesheet"  href = "resources/css/bootstrap.min.css" />
     < title ></ title >
</ head >
< body >
< div  class = "container"  id = "box" >
     < form  role = "form" >
         < div  class = "form-group" >
             < label  for = "uName" >用户名：</ label >
             <!--.form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;-->
             < input  type = "text"  id = "uName"  class = "form-control"  v-model = "userName" >
         </ div >
         < div  class = "form-group" >
             < label  for = "age" >年  龄：</ label >
             < input  type = "text"  id = "age"  class = "form-control"  v-model = "userAge" >
         </ div >
         < div  class = "form-group" >
             < input  type = "button"  value = "添加"  class = "btn btn-primary"  @ click = "add" >
             < input  type = "reset"  value = "重置"  class = "btn btn-success" >
         </ div >
     </ form >
     < hr >
     < table  class = "table table-bordered table-hover" >
         < caption  class = "h2 text-center" >用户信息表</ caption >
         < thead >
         < tr  class = "text-info" >
             < th  class = "text-center" >序号</ th >
             < th  class = "text-center" >名字</ th >
             < th  class = "text-center" >年龄</ th >
             < th  class = "text-center" >操作</ th >
         </ tr >
         </ thead >
         < tbody >
         < tr  class = "text-center"  v-for = "item in myData" >
             < td >{{$index+1}}</ td >
             < td >`item`.`name`</ td >
             < td >`item`.`age`</ td >
             < td >< button  class = "btn btn-info btn-sm"  data-toggle = "modal"  data-target = "#layer"  @ click = "nowIndex=$index" >删除</ button ></ td >
         </ tr >
         < tr  class = "text-right"  v-show = "myData.length!=0" >
             < td  colspan = "4" >
                 < button  class = "btn btn-danger btn-sm"  data-toggle = "modal"  data-target = "#layer"  @ click = "nowIndex=-2" >全部删除</ button >
             </ td >
         </ tr >
         < tr  class = "text-center text-muted"  v-show = "myData.length==0" >
             < td  colspan = "4" >< p >暂无数据……</ p ></ td >
         </ tr >
         </ tbody >
     </ table >
     <!--模态框 弹出框-->
     < div  class = "modal fade"  role = "dialog"  id = "layer" >
         < div  class = "modal-dialog" >
             < div  class = "modal-content" >
                 < div  class = "modal-header" >
                     < button  type = "button"  class = "close"  data-dismiss = "modal" >
                         < span >&times;</ span >
                     </ button >
                     < h4  class = "modal-title" >确认删除吗？</ h4 >
                 </ div >
                 < div  class = "modal-body text-right" >
                     < button  type = "button"  class = "btn btn-default"  data-dismiss = "modal" >取消</ button >
                     < button  type = "button"  class = "btn btn-primary"  data-dismiss = "modal"  @ click = "remove(nowIndex)" >确认</ button >
                 </ div >
             </ div >
         </ div >
 
     </ div >
 
</ div >
 
 
< script  src = "resources/js/jquery-1.9.1.min.js" ></ script >
< script  src = "resources/js/bootstrap.min.js" ></ script >
< script  src = "resources/js/vue.js" ></ script >
< script >
     var vm = new Vue({
         el:'#box',
         data:{
             myData:[],
             userName:'',
             userAge:'',
             nowIndex:'-100' //需要特别注意nowIndex的用法
         },
         methods:{
             add:function(){
                 this.myData.push({
                     name: this.userName,
                     age: this.userAge
                 });
                 this.userName='';
                 this.userAge='';
             },
             remove:function(n){
                 if(n==-2){//如果点击的是“全部删除”，则清空整个数组
                     this.myData=[];
                 }else{//如果点击的是单行内的“删除”，则删除该行即可
                     this.myData.splice(n,1)
                 }
             }
         }
     })
</ script >
</ body >
</ html >

wKiom1gK6LWgoU6SAAAqZUSzBAI424.png

本文转自   frwupeng517   51CTO博客，原文链接:http://blog.51cto.com/dapengtalk/1864556


weixin_34326429
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
个人信息表格个人信息表格个人信息表格
10-13
个人信息表格个人信息表格个人信息表格个人信息表格个人信息表格个人信息表格个人信息表格个人信息表格个人信息表格个人信息表格个人信息表格
【Vue 入门】使用 Vue2 开发一个展示项目列表的应用
weixin_30849591的博客
04-28 178
前言 一直没有找到一个合适的展示个人项目的模板，所以自己动手使用 Vue 写了一个。该模板基于 Markdown 文件进行配置，只需要按一定规则编写 Markdown 文件，然后使用一个 在线工具 转为 JSON 文件即可。下面是该项目的在线地址和源码。本文主要记录一下项目中用到的相关知识。 在线演示 源码 效果 程序最终的效果如下图所示： 整个项目只包含两个组件：项目介绍 和...
vue2.0+bootstrap实战（一）
weixin_34185364的博客
01-09 2324
俗话说，纸上学来终觉浅，绝知此事要躬行，最近两天学习了下Vue2.0,想做个项目练下手，顺便写个文章方便复习回顾~ 1.使用cue-cli创建vue项目 进入指定目录，右击Git Bash Here打开git命令行，vue init webpack 项目名称，创建基于webpack的vue项目 根据命令行的提示，选择是否安装vue-ro...
vue实现一个带搜索功能的列表_这个9个Vue.js库，每个现代开发人员都应该了解...
weixin_39885412的博客
11-20 207
英文 |https://medium.com/better-programming/9-vue-js-libraries-that-will-make-your-life-easier-5f14c09b0ce0翻译 |web前端开发(ID:web_qdkf)紧跟Vue生态系统的所有最新趋势是很难的。项目正在迅速发展。每天都有新项目涌现。很容易错过Vue生态系统中一些可用的出色的库。...
bootstrap-vue-treeview：用于Bootstrap和Vue.js 2.0+的treeview组件
02-05
npm install --save bootstrap-vue-treeview 入门 Webpack 如果使用Webpack捆绑器（推荐），则可以导入组件并在本地注册： import { bTreeView } from 'bootstrap-vue-treeview' [ ... ] components: { bTreeView...
Vue Cli与BootStrap结合实现表格分页功能
08-29
Vue Cli与BootStrap结合实现表格分页功能 该资源主要介绍了如何使用Vue Cli与BootStrap结合实现表格分页功能。下面是相关知识点的详细说明： 一、Vue Cli简介 Vue Cli是基于Vue.js的命令行工具，用于快速构建Vue....
使用Bootstrap和Vue实现用户信息的编辑删除功能
08-29
总结来说，通过结合Bootstrap的UI组件和Vue的数据绑定及事件处理能力，我们可以构建一个具有用户信息编辑和删除功能的Web应用。这个应用不仅外观专业，而且功能强大，用户体验良好。对于初学者和开发者来说，这是一...
bootstrap-icons-vue:一个用于Bootstrap图标的Vue组件库
05-09
Bootstrap图标Vue Bootstrap图标旨在与Bootstrap组件一起使用，从表单控件到导航。 但是，它们也可以在几乎任何项目中工作。 这是因为Bootstrap图标是SVG，因此它们可以快速轻松地缩放并可以使用CSS设置样式。 -该...
vue指令只能输入正数并且只能输入一个小数点的方法
08-27
主要介绍了vue指令只能输入正数并且只能输入一个小数点的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-cli+elementUI：个人信息提交表格显示Demo
07-30
vue-cli+elementUI：个人信息提交表格显示Demovue-cli+elementUI：个人信息提交表格显示Demovue-cli+elementUI：个人信息提交表格显示Demo
bootstrap校验表单js css
02-10
能够增加兼容性的强大框架.导入需要的css和js文件（JS中username，password等键值名和input标签中name属性值对应），运行就能够进行非空，长度验证，完全不需要管css样式
vue与bootstrap实现简单用户信息添加删除功能
11-28
本文实例为大家分享了vue与bootstrap实现用户信息添加删除操作的具体代码，供大家参考，具体内容如下 小记： 1.v-model=””    用于input表单双向数据绑定  逻辑层跟渲染层双向绑定 2.v-on:click=’add()’     click方法绑定  3.v-for='(item,index) in myData\u2019 \u00a0 \u904d\u5386\u6570\u7ec4 \u00a0{{index}}\u00a0 \u00a0 \u00a0 {{item.name}}\u00a0 \u00a0 \u00a0 {{item.age}} \u00a0 \u9002\u7528\u4e8evue\u7248\u672c2.0 \u00a0\n4.v-for='(item,index,key) in myData’   遍历json  {{index}} 
vue.js动态表格增加删除修改代码.zip
07-04
vue.js动态表格增加删除修改代码是一款带日期显示，支持删除和重新编辑表格内容效果代码。
bootstrap+vueJS+HTML5表单中password输入的显示与隐藏
10-11
bootstrap+vueJS+HTML5表单中password输入的显示与隐藏.
bootstrap的表单验证 vue_vue2.0数据双向绑定与表单bootstrap+vue组件
weixin_42443651的博客
12-24 356
最近一直在用vue，觉得确实是好用。一，拿数据的双向绑定来说吧demo1{{ name }}new Vue({el: '#app',data: {name: ''},watch: {name: function () {console.log(this.name);}}});vue中的所有数据都是在data中定义的，el是指的挂载的元素，watch 是我可以检测某个数据的变化。v-model=“n...
基于bootstrap_信息采集
weixin_30808693的博客
03-04 127
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>信息收集卡</title> <link rel="stylesheet" href="css/bootstrap.min.css"> &...
利用Vue＋bootstrap实现学生用户信息表
this_name_true的博客
01-09 2061
效果如下： 学生用户信息表      代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;todolist加购物车&lt;/title&gt; &lt;link rel="stylesheet" hr
个人信息录入并显示进一步掌握各控件的使用
03-27
完成对个人信息的录入，并显示出来，进一步掌握各控件的使用
Vue项目实战：用户管理与权限控制
"06-Vue全家桶-项目实战（下）.pdf 是一份关于Vue.js实际应用的详细教程，特别关注于一个电子商务平台的构建。文档涵盖了用户管理、权限管理、分类管理、参数管理、商品管理和订单管理等多个关键模块，并涉及到数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值