功能实现 · 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> ~~~