vue.js 圖書管理系統
阿新 • • 發佈：2017-11-04
on() filter code cti doc ner title -o ava
<!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:"" } })
vue.js 圖書管理系統