功能實現 · Vue從入門到實戰

## 刪除功能 ~~~ <td><button @click="delBook(index)">刪除</button></td> ~~~ ~~~ methods:{ delBook:function(idx){//刪除當前這本書 this.books.splice(idx,1); } } ~~~ ## 添加新書 js ~~~ <script> var vm = new Vue({ el: '#app', data: { newBook:{ id:0, name:'', author:'', price:'', tag:'' } }, methods:{ addBook:function(){//添加新書 var maxId=0; for(var i=0;i<this.books.length;i++){ if(maxId<this.books[i].id){ maxId=this.books[i].id; } } this.newBook.id=maxId+1; this.books.push(this.newBook); this.newBook={}; } } }) </script> ~~~ html ~~~ <div class="add"> <h2>添加新書</h2> <div class="form-group"> <p>書名：<input type="text" v-model="newBook.name" /></p> <p>作者：<input type="text" v-model="newBook.author"/></p> <p>價格：<input type="text" v-model="newBook.price"/></p> <p>標簽：<input type="text" v-model="newBook.tag"/></p> <p><button @click="addBook">添加</button></p> </div> </div> ~~~ ## 完整代碼 >[info]附完整代碼 ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>前端研習社-圖書管理系統</title> <style> h1{ text-align: center; } table, td, th { border-collapse: collapse; border-spacing: 0 } table { width: 600px; margin: 0 auto; text-align: center; } td, th { border: 1px solid #bcbcbc; padding: 5px 10px; } th { background: #42b983; font-size: 1.2rem; font-weight: 400; color: #fff; cursor: pointer; } tr:nth-of-type(odd) { background: #fff; } tr:nth-of-type(even) { background: #eee; } .add{ width: 400px; padding:10px 50px; margin: 10px auto; background: #ccc; border-radius: 5px; } h2{ text-align: center; } p{ height: 50px; line-height: 50px; } input{ width: 300px; height: 50px; line-height: 50px; font-size:20px; padding-left:10px ; } p button{ float: right; width: 100px; height: 50px; line-height: 50px; font-size:20px; border-radius: 5px; } </style> <script src="vue.js"></script> </head> <body> <div id="app"> <h1>圖書管理系統</h1> <table> <thead> <tr> <th>序號</th> <th>書名</th> <th>作者</th> <th>價格</th> <th>標簽</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="book in books"> <td>{{ book.id }}</td> <td>{{ book.name }}</td> <td>{{ book.author }}</td> <td>{{ book.price }}</td> <td>{{ book.tag }}</td> <td><button @click="delBook(index)">刪除</button></td> </tr> </tbody> </table> <div class="add"> <h2>添加新書</h2> <div class="form-group"> <p>書名：<input type="text" v-model="newBook.name" /></p> <p>作者：<input type="text" v-model="newBook.author"/></p> <p>價格：<input type="text" v-model="newBook.price"/></p> <p>標簽：<input type="text" v-model="newBook.tag"/></p> <p><button @click="addBook">添加</button></p> </div> </div> </div> </body> <script> var vm = new Vue({ el: '#app', data: { books:[ {id:1,name:'《三國演義》',author:'羅貫中',price:'99.99',tag:'經典'}, {id:2,name:'《紅樓夢》',author:'曹雪芹',price:'88',tag:'推薦'}, {id:3,name:'《水滸傳》',author:'施耐庵',price:'77',tag:'熱銷'}, {id:4,name:'《西游記》',author:'吳承恩',price:'60',tag:'經典'} ], newBook:{ id:0, name:'', author:'', price:'', tag:'' } }, methods:{ addBook:function(){//添加新書 var maxId=0; for(var i=0;i<this.books.length;i++){ if(maxId<this.books[i].id){ maxId=this.books[i].id; } } this.newBook.id=maxId+1; this.books.push(this.newBook); this.newBook={}; }, delBook:function(idx){//刪除當前這本書 this.books.splice(idx,1); } } }) </script> </html> ~~~