界面首先需要引入bootstrap的css和bootstrap的js文件，還有vue.js和jQuery.js才可以看見效果。
這里提供bootstrap的在線文件給大家引用：
<!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" rel="external nofollow" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
效果如下圖所示，輸入用戶名和年齡，點擊添加，數據會自動添加到下面的用戶信息表內。當沒有數據時，用戶信息表顯示：暫無數據……，當有數據時，顯示 刪除全部 按鈕，這里為了方便快捷，我沒有做刪除按鈕的彈出框，所以 點擊刪除按鈕 會直接刪除掉當前這條數據。
<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" v-on:click="add()" /> <input type="reset" value="重置" class="btn btn-danger" /> </div> </form> <hr> <table class="table table-bordered table-hover"> <caption class="text-center">用戶信息表</caption> <tr class="text-danger"> <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-primary btn-sm" v-on:click="deleteMsg()">刪除</button> </td> </tr> <tr v-show="myData.length!==0"> <td colspan="4" class="text-right"> <button class="btn btn-danger" v-on:click="all()">刪除全部</button> </td> </tr> <tr v-show="myData.length==0"> <td colspan="4" class="text-center text-muted"> <p>暫無數據……</p> </td> </tr> </table> </div>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(){ this.myData.splice(0,1) }, all:function(){ this.myData = []; } } }) }以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
