bootstrap+vue=动态添加删除用户数据

来源：互联网发布：linux c 删除文件编辑：程序博客网时间：2024/06/07 06:38
首先使用bootstrap进行页面布局，使用vue进行数据绑定，可实现添加、删除、全部删除。全部删除、“暂无数据”根据有无数据动态显示隐藏，这是vue的机制，做起来很方便。
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <link rel="stylesheet" type="text/css" href="lib/bootstrap.min.css">    <script src="lib/jquery-1.7.2.js"></script>    <script src="lib/bootstrap.js"></script>    <script src="lib/vue.js"></script>    <script type="text/javascript">    window.onload = function() {        new Vue({            el: '#box',            data: {                username: '',                age: '',                infoArr: [{                    name: 'lala',                    age: '34'                }, {                    name: 'heihei',                    age: '23'                }],                /*infoArr: [],*/                nowIndex: -10000            },            methods: {                add: function() {                    this.infoArr.push({                        name: this.username,                        age: this.age                    });                    this.username = '';                    this.age = '';                },                reset: function() {                    this.username = '';                    this.age = '';                },                deleteMsg: function(n) {                    if (n == -2) {                        this.infoArr = [];                    } else {                        this.infoArr.splice(n, 1);                    }                }            }        })    }    </script></head><body>    <div class="container" id="box">        <form role="form">            <div class="form-group">                <label for="username">用户名：</label>                <input type="text" id="username" class="form-control" placeholder="请输入用户名" v-model="username">            </div>            <div class="form-group">                <label for="age">年 龄：</label>                <input type="text" id="age" class="form-control" placeholder="请输入年龄" v-model="age">            </div>            <div class="form-group">                <input type="button" value="添加" class="btn btn-primary" v-on:click="add()">                <input type="reset" value="重置" class="btn btn-danger" v-on:click="reset()">            </div>        </form>        <hr>        <table class="table table-bordered table-hover">            <caption class="h3 text-info">用户信息表</caption>            <tr class="text-danger">                <td class="text-center">序号</td>                <td class="text-center">名字</td>                <td class="text-center">年龄</td>                <td class="text-center">操作</td>            </tr>            <tr v-for="infoObj in infoArr">                <td class="text-center">{{$index+1}}</td>                <td class="text-center">{{infoObj.name}}</td>                <td class="text-center">{{infoObj.age}}</td>                <td class="text-center">                    <input type="button" value="删除" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=$index">                </td>            </tr>            <tr v-show="infoArr.length!=0">                <td colspan="4" class="text-right">                    <button type="button" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=-2">全部删除</button>                </td>            </tr>            <tr v-show="infoArr.length==0">                <td colspan="4" class="text-center">                    <span class="text-muted">暂无数据...</span>                </td>            </tr>        </table>        <div class="modal" id="layer">            <div class="modal-dialog">                <div class="modal-content">                    <div class="modal-header">                        <button type="button" class="close text-right" data-dismiss="modal">                            <span>x</span>                        </button>                        <h4 class="modal-title">确定删除吗？</h4>                    </div>                    <div class="modal-body text-right">                        <button type="button" class="btn btn-sm btn-primary" data-dismiss="modal">取消</button>                        <button type="button" class="btn btn-sm btn-danger" data-dismiss="modal" v-on:click="deleteMsg(nowIndex)">确定</button>                    </div>                </div>            </div>        </div>    </div></body></html>
0 0