用VUE和Bootstrap搭建留言板

用VUE和Bootstrap搭建留言板，用到的库有bootstrap、vue、jquery

html代码

class="container" id="box">
    
class="text-center">用VUE和Bootstrap搭建留言板
    
role="form">
        
class="form-group">
            for="username">用户名：
            type="text" id="username" class="form-control" placeholder="请输入用户名" v-model="username">
        
        
class="form-group">
            for="age">年 龄：
            type="text" id="age" class="form-control" placeholder="请输入年龄" v-model="age">
        
        
class="form-group">
            type="button" value="添加" class="btn btn-primary" v-on:click="add()">
            type="reset" value="重置" class="btn btn-danger">
        
    
    

    class="table table-bordered table-hover">
                class="text-center text-danger">
                                                                class="text-center" v-for="(item, index) in myData">
                                                                v-show="myData.length!=0">
                            v-show="myData.length==0">
                        
class="h3 text-info">用户信息
序号
姓名
年龄
操作

{{index+1}}
{{item.name}}
{{item.age}}
class="text-right">
                class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=index">删除
            

colspan="4" class="text-right">
                class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=-2">全部删除
            

colspan="4" class="text-center text-muted">
                
暂无数据...
            


    
    
role="dialog" class="modal fade" id="layer">
        
class="modal-dialog">
            
class="modal-content">
                
class="modal-header">
                    type="button" class="close" data-dismiss="modal">
                        ×
                    
                    
class="modal-title">确认删除?
                
                
class="modal-body text-right">
                    class="btn btn-primary btn-sm" data-dismiss="modal">cancel
                    class="btn btn-danger btn-sm" data-dismiss="modal" v-on:click="deleteMsg(nowIndex)">ok
                
            
        
    

js代码

new Vue({
    el:'#box',
    data:{
        myData:[],
        username:'',
        age:'',
        nowIndex:-1
    },
    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);
            }
        }
    }
});