代码如下：
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>品牌列表</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="../vue.js"></script> </head> <body> <div id="app"> <!--完成添加功能--> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">添加品牌</h3> </div> <!--id--> <div class="panel-body form-inline"> <label> id : <input type="text" class="form-control" v-model="id"> </label> <!--搜索--> <label> name : <input type="text" class="form-control" v-model="name"> </label> <input type="button" value="添加" class="btn btn-primary" @click="add()"></div> </div> <!--下面的代码表示展示区域--> <table class="table table-hover table-striped"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Ctime</th> <th>Operation</th> </tr> </thead> <tbody> <tr v-for="item in list" :key="item.id"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td>{{ item.ctime }}</td> <td> <a href="#" @click.prevent="del(item.id)">删除</a> </td> </tr> </tbody> </table> </div>
<script> var vm = new Vue ({ el : "#app", data : { id : '', name : '', list : [ {id: 1, name: '法拉第', ctime:new Date() }, {id: 2, name: '玛莎拉蒂', ctime:new Date() } ] }, methods : { add(){ //这是添加的方法 //获取id，name var car = {id : this.id, name : this.name, ctime:new Date() } this.list.push(car) this.id = this.name = '' },
del(id){ //这是删除的方法 根据id删除数据 // console.log("hjjaha") //测试 this.list.some((item, i)=>{ if(item.id == id){ this.list.splice(i,1) return true; } }) } } }); </script> </body> </html> 效果图如下: