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