bootstarp : css 框架 跟jqueryMobile一样

只需要给标签 赋class 角色

依赖jquery

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <link rel = "stylesheet" href = "lib/bootstrap.min.css"> 
    <script src = "lib/jquery-1.7.2.js"></script>
    <script src = "lib/bootstarp.js"></script>
    
    <script src = "vue.js"> </script>
    <script>
        window.onload = function(){
            new Vue({
                el:'#box',
                data:{
                    myData:[
                        //{name:'xxx' ,age:"xxx"}
                    ],
                    username:'',
                    age:'',
                    nowIndex:-100,
                    layertittle:''
                },
                methods:{
                    add:function(){
                            this.myData.push({
                                name:this.username,
                                age:this.age
                            });
                            this.username = '';
                            this.age = '';
                    } ,
                    delete:function(){
                            if(this.nowIndex == -1){
                                    this.myData = [];
                            }else{
                                    this.myData.splice(this.nowIndex,1);
                            }
                    }
                }
            });
        };
    </script>
</head>
<body>
        <div class="container" id = "box">
            <form role = "form">
                <div class = "form-group">
                    <label for = "username">userName:</label>
                    <input type = "text" id = "username" class = "form-control" placeholder = "input username">
                </div>
                <div class = "form-group">
                    <label for = "age">Age:</label>
                    <input type = "text" id = "age" class = "form-control" placeholder = "input age">
                </div>
                <div class = "form-group">
                    <input type = "button" value = "add" class = "btn btn-primary" v-on:click = "add()">
                    <input type = "reset" value = "reset" class = "btn btn-danger">
                </div>
            </form>
            <hr>
            <table class = "table">
                <caption class = "h2 text-info">userInfo</caption>
                <tr>
                    <th class = "text-center">number</th>
                    <th class = "text-center">name</th>
                    <th class = "text-center">age</th>
                    <th class = "text-center">do</th>
                </tr>
                <tr class = "text-center" v-for = "item in myData">
                    <td>{{$index+1}}</td> 
                    <td>{{item.name}}</td> 
                    <td>{{item.age}}</td> 
                    <td>
                        <button class = "btn btn-primary btn-sm" data-toggle = "modal" data-target = "#layer" v-on:click="nowIndex = $index;layertittle = 'sure del?'">del</button>
                    </td> 
                </tr>
                
                <tr v-show = "myData.length != 0 ">
                    <td colspan = "4" class = "text-right">
                        <button class = "btn btn-danger btn-sm" data-toggle = "modal" data-target = "#layer" v-on:click = "nowIndex = -1;layertittle = 'sure dell all?'">del all</button>
                    </td>
                </tr>
                <tr v-show = "myData.length == 0">
                    <td colspan = "4" class = "text-center text-muted">
                        <p>no data.....</p>
                    </td>
                </tr>
            </table>
            <!-- alert-->
            <div role = "dialog" class = "model fade" id ="layer">
                    <div class = "modal-dialog">
                            <div class = "modal-content">
                                    <div class = "modal-header">
                                            <button type = "button" class = "close" data-dismiss = "modal">
                                                <span>&times;</span>
                                                <h3 class ="modal-title">{{layertittle}}</h3>
                                            </button>
                                    </div>
                                    <div class = "modal-body text-right">
                                            <button class = "btn btn-primary btn-sm" data-dismiss = "modal">no</button>
                                            <button class = "btn btn-danger btn-sm" data-dismiss = "modal" v-on:click = "delete()">yes</button>
                                    </div>
                            </div>
                    </div>
            <div>
        </div>
</body>
</html>