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">&times;</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:'[email protected]'},
                        {name:'yjp',age:23,email:'[email protected]'}
                    ],
                    /*不写页面会显示不出俩，会报错，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的使用。

VUE+Boostrap实现简单的用户添加和删除

1.导入所需的库

2.使用boostrap实现界面

3.添加VUE实例

猜你喜欢