IMWeb任务一之Vue+Bootstrap留言板

实现留言板效果图

添加两个信息

接下来删除william这条信息

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

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

接下来就是代码环节。
下面是html代码

<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>

这里是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对于我来说，是第一次接触的框架，挺有意思。
以后我会更加努力学习的！