1.导入所需的库
css需要bootstrap.css
js需要jquery.js，bootstrap.js，vue.js
（直接使用下载好的就行，不需要使用npm等进行下载）...
1.导入所需的库
css需要bootstrap.css
js需要jquery.js，bootstrap.js，vue.js
（直接使用下载好的就行，不需要使用npm等进行下载）
2.使用boostrap实现界面
实现效果如下
![\"\"](\"/images/csdn/154557066215dS4557z0f662.png\")
代码实现如下：
<body>
<div id=\"userList\" class=\"container\">
<h3 class=\"text-center\">添加用户</h3>
<form class=\"form-horizontal\" role=\"form\">
<div class=\"form-group\">
<label for=\"name\" class=\"col-sm-2 control-label col-sm-offset-1 \" >姓名：</label>
<div class=\"col-sm-6\">
<input id=\"name\" type=\"text\" class=\"form-control\" v-model=\"user.name\" placeholder=\"请输入姓名\">
</div>
</div>
<div class=\"form-group\">
<label for=\"age\" class=\"col-sm-2 control-label col-sm-offset-1 \" >年龄：</label>
<div class=\"col-sm-6\">
<input id=\"age\" type=\"text\" class=\"form-control\" v-model=\"user.age\" placeholder=\"请输入年龄\">
</div>
</div>
<div class=\"form-group\">
<label for=\"email\" class=\"col-sm-2 control-label col-sm-offset-1 \" >邮箱：</label>
<div class=\"col-sm-6\">
<input id=\"email\" type=\"text\" class=\"form-control\" v-model=\"user.email\" placeholder=\"请输入邮箱\">
</div>
</div>
<div class=\"form-group text-center\">
<input type=\"button\" class=\"btn btn-primary\" value=\"添 加\" v-on:click=\"addUser\">
<input type=\"reset\" class=\"btn btn-primary\" value=\"重 置\">
</div>
</form>
<hr>
<table class=\"table table-bordered table-hover\">
<caption class=\"h3 text-center text-info\">目录列表</caption>
<thead>
<tr>
<th class=\"text-center\">序号</th>
<th class=\"text-center\">姓名</th>
<th class=\"text-center\">年龄</th>
<th class=\"text-center\">邮箱</th>
<th class=\"text-center\">操作</th>
</tr>
</thead>
<tbody>
<tr v-for=\"(user,index) in users\" class=\"text-center\">
<td>{{index}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.email}}</td>
<td>
<button class=\"btn btn-danger btn-sm\" data-toggle=\"modal\" data-target=\"#del\" v-on:click=\"nowIndex=index\">删除</button>
</td>
</tr>
<tr >
<td colspan=\"5\" class=\"text-right\">
<button class=\"btn btn-danger btn-sm\" data-toggle=\"modal\" data-target=\"#del\" v-on:click=\"nowIndex=-1\">删除所有</button>
</td>
</tr>
</tbody>
</table>
<!--模态框，弹出框-->
<div class=\"modal\" id=\"del\">
<div class=\"modal-dialog\">
<div class=\"modal-content\">
<div class=\"modal-header\">
<!--close表示关闭标签的样式-->
<button class=\"close\" data-dismiss=\"modal\">×</button>
<h4 class=\"modal-title\" v-show=\"nowIndex!==-1\">确认要删除用户{{users[nowIndex]?users[nowIndex].name:\'\'}}吗？</h4>
<h4 class=\"modal-title\" v-show=\"nowIndex===-1\">确认要删除所有用户吗？</h4>
</div>
<div class=\"modal-body text-center\">
<button class=\"btn btn-primary\" data-dismiss=\"modal\">取消</button>
<button class=\"btn btn-primary\" data-dismiss=\"modal\" v-on:click=\"deleteUser\">确认</button>
</div>
</div>
</div>
</div>
</div>
</body>
代码需要关注的地方：
- bootstrap中的栅栏布局class=\"container\"；
- 可以使用bootstrap中的class=\"text-center （text-right）\"实现容器内的内容居中；
- 使用表单的时候：①首先使用<form>标签将所有表单内容包含起来，添加bootstrap类role=\"form\"和class=\"form-horizontal\"实现水平居中，也可以参考bootstrap文档实现垂直等效果；②每一个表单组用div表示，添加类class=\"form-group\",里面可以放<label>或者<input>标签，为了布局方面，可以把input等元素放在一个div里，可以使用boostrap栅栏布局，栅栏布局col相加不大于12，可以使用col-sm-off-set-num，进行偏移，实现居中效果，label和input标签class=\"label-control\"和class=\"form-control\",input可以添加placeholder添加默认内容；③input type设置为button,可以添加bootstrap样式class=\"btn btn-fault(primary,danger,warning) btn-sm value添加button里的内容，需要强调将inpue设置为type=\"reset\"可以将form标签里的所有内容清空。
- 水平分割线可以用<hr>
- 表格元素的使用：①结构table下有caption thead tbody，thead下面有tr ,tr里面有th,tbody里面tr，tr有td；②为table设置bootstrap属性，可以有实线，虚线，鼠标悬停效果；③caption是文本，可以为文本添加boostrap效果；④表格里的数据由VUE实例里的数据加载出来；
- ①bootstrap里的模态框，有三层modal__modal-dialog__modal-content，modal-content里面有三层，modal-header modal-body,modal-footer;②header设置关闭按钮参考×和提示内容class=\"modal-title\";③开启模态框，在需要点击的按钮上设置data-toggle=\"modal\"和data-target=\"#del\";关闭模态框，在模态框中的按钮设置data-dismiss=“modal”,需要强调的是，可以为按钮同时设置data-dismiss和click事件；
3.添加VUE实例
<script>
window.onload=function () {
let vm=new Vue({
el:\'#userList\',
data:{
users:[
{name:\'wkh\',age:22,email:\'6666666@qq.com\'},
{name:\'yjp\',age:23,email:\'6777777@qq.com\'}
],
/*不写页面会显示不出俩，会报错，user is not defined*/
user:{},
/*当前要删除项的索引*/
nowIndex:-1
},
methods:{
addUser(){
this.users.push(this.user);
this.user={};
},
deleteUser(){
if(this.nowIndex==-1){//删除所有
this.users=[];
}else{
/*从指定位置开始删除元素*/
this.users.splice(this.nowIndex,1);
}
}
}
})
}
</script>
代码需要关注的地方
- windoe.onload=function(){}页面加载完执行；
- new一个vue实例，有el,data,methods等内容；
- 添加用户时，用户的姓名，年龄，邮件和VUE中的数据相关联，也就是相互绑定需要v-modal，绑定的是usr.name,所以需要在data里设置这样user对象；添加用户按钮设置v-onclick:\"xxx\"事件，简写@:click=\"xxx\";添加用户动作使用push,添加完成后清空user对象。
- 表格数据在tr就是行上使用v-for指令，然后在td里使用{{}}语法展示数据；
- 区分删除那一行还是删除所有。可以使用数组的index属性来区分，index最小是0，可以用变量currentIndex区分，如果是删除所有，就设置为-1.删除当前用户，则设置为当前index值，这样在弹出模态框的同时，currentIndex的值就发生了变化。 然后可以在模态框中点击确认进行动作的执行，动作执行写一个函数，先判断currentIndex的值，如果是-1，删除所有，如果不是，就删除当前值。删除所有直接赋值空数组，删除固定下标的值，使用splice。
- 注意this的使用。
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
上一篇：线程池你真不来了解一下吗？ 下一篇：多线程之死锁就是这么简单
