<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图书管理系统</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> <script src="js/vue.js"></script> <style type="text/css"> #update-book{ display: none; } </style> </head> <body> <div class="container"> <div class="col-md-6 col-md-offset-3"> <h1>Vue demo</h1> <div id="app"> <table class="table table-hover "> <br /> <thead> <tr> <th>序号</th> <th>书名</th> <th>作者</th> <th>价格</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="book in filterBooks"> <td>{{book.id}}</td> <td>{{book.name}}</td> <td>{{book.author}}</td> <td>{{book.price}}</td> <template v-if="book.id%2==0"> <td class="text-left"> <button type="button" class="btn btn-success" class="del" @click="delBook(book)">删除</button> <button type="button" class="btn btn-success" @click="updateBook(book)" >修改</button> </td> </template> <template v-else> <td class="text-left"> <button type="button" class="btn btn-danger" class="del" @click="delBook(book)">删除</button> <button type="button" class="btn btn-danger" @click="updateBook(book)" >修改</button> </td> </template> </tr> </tbody> </table> <div id="add-book"> <div class="row" style="margin-bottom: 30px;"> <div class="col-md-3" style="text-align: right;font-size: 16px;line-height: 30px;"> 请输入书名： </div> <div class="col-md-5"> <input type="text" class="form-control" v-model="search"/> </div> </div> <h3>添加书籍</h3> <hr /> <div class="form-group"> <label for="group">书名</label> <input type="text" class="form-control" v-model="book.name" id="group"> </div> <div class="form-group"> <label for="author">作者</label> <input type="text" class="form-control" v-model="book.author" id="author"> </div> <div class="form-group"> <label for="price">价格</label> <input type="text" class="form-control" v-model="book.price" id="price"> </div> <button class="btn btn-primary btn-block" v-on:click="addBook()">添加</button> </div> <div id="update-book"> <h3>修改书籍</h3> <hr /> <div class="form-group"> <label for="group1">书名</label> <input type="text" class="form-control" v-model="book.name" id="group1"> </div> <div class="form-group"> <label for="author1">作者</label> <input type="text" class="form-control" id="author1" v-model="book.author"> </div> <div class="form-group"> <label for="price1">价格</label> <input type="text" class="form-control" id="price1" v-model="book.price"> </div> <button class="btn btn-primary btn-block" @click="updatesBook()" >完成</button> </div> </div> </div> </div> <script type="text/javascript" src="js/jquery-3.1.1.js"></script> <script src="js/demo.js" type="text/javascript" charset="utf-8"></script> </body> </html> js文件 var id = 0; var app = new Vue({ el:'#app', methods:{ addBook:function(){ this.book.id = this.books.length+1; this.books.push(this.book); this.book={}; }, delBook:function(book){ var blength=this.books.length; this.books.splice(book.id-1,1); for(var i=0;i<blength;i++){ if (book.id<this.books[i].id) { this.books[i].id -= 1; } } }, updateBook:function(book){ $("#add-book").css("display","none"); $("#update-book").css("display","block"); id = book.id; }, updatesBook:function(){ this.book.id = id; this.books.splice(id-1,1,this.book); $("#add-book").css("display","block"); $("#update-book").css("display","none"); this.book={}; } }, computed:{ filterBooks:function(){ var books=this.books; var search=this.search; /*if (!search) { return books; } var arr=[]; for(var i=0;i<books.length;i++){ var index = books[i].name.indexOf(search); if (index>-1) { arr.push(books[i]); } } return arr;*/ //第二种方法 return books.filter(function(book){ return book.name.toLowerCase().indexOf(search.toLowerCase())!=-1; }); } }, data:{ book:{ id:0, author:'', name:'', price:'' }, books:[{ id:1, author:'曹雪芹', name:'红楼梦', price:32.0 }, { id:2, author:'施耐庵', name:'水浒传', price:55.0 }, { id:3, author:'罗贯中', name:'三国演义', price:41.0 }, { id:4, author:'吴承恩', name:'西游记', price:39.0 }], search:"" } })