1.导入所需的库
css需要bootstrap.css
js需要jquery.js,bootstrap.js,vue.js
(直接使用下载好的就行,不需要使用npm等进行下载)
2.使用boostrap实现界面
实现效果如下
代码实现如下:
<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.οnlοad=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的使用。