IMWeb训练营作业-----Vue+Bootstrap留言板

实现留言板效果图

添加两个信息

接下来删除william这条信息

接着弹出模态框，提示是否删除。

最后就是只有无笙的这条信息了

接下来就是代码环节。

    <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" @click="add()">                <input type="reset" value="重置" class="btn btn-danger">            </div>        </form>        <hr>        <table class="table table-bordered table-hover">            <caption class="h3 text-center text-danger">用户信息表</caption>            <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>            <tr class="text-center" v-for="(item,index) in myData">                <td>{{index+1}}</td>                <td>{{item.name}}</td>                <td>{{item.age}}</td>                <td>                    <button class="btn btn-danger btn-sm" data-toggle="modal" data-target=".layer" @click="nowIndex=$index">删除</button>                </td>            </tr>            <tr v-show="myData.length!=0">                <td colspan="4" class="text-right">                    <button class="btn btn-danger btn-sm" @click="nowIndex=-2"  data-toggle="modal" data-target=".layer" >删除全部</button>                </td>            </tr>            <tr v-show="myData.length==0">                <td colspan="4" class="text-center text-muted">                    <p>暂无数据 ......</p>                </td>            </tr>        </table>        <!--模态框  （弹出框）-->        <div role="dialog" class="modal fade layer"  >            <div class="modal-dialog">                <div class="modal-content">                    <div class="modal-header">                        <button type="button" class="close" data-dismiss="modal"><span>×</span> </button>                        <h4 class="modal-title">确认删除吗？</h4>                    </div>                    <div class="modal-body text-right">                        <button class="btn btn-danger btn-sm" data-dismiss="modal" @click="deleteMsg(nowIndex)">确认</button>                        <button class="btn btn-primary btn-sm" data-dismiss="modal">取消</button>                    </div>                </div>            </div>        </div>    </div>

引用了vue.js和bootstrap就不展示了

接下来是js代码。

window.onload= function(){    new Vue({        el:"#box",        data:{            myData:[],            username:"",            age:"",            nowIndex:-100        },        methods:{            add:function(){                this.myData.push({                    name:this.username,                    age:this.age                });                this.username="";                this.age="";            },            deleteMsg:function(n){                if(n==-2){                    this.myData=[];                }                else{                    this.myData.splice(n,1);              }            }        }    });};

只有这几行就可以实现，vue对于我来说，第一次接触框架，挺有意思。

以后我会更加努力学习的！