使用vuejs实现简单的图书增加删除功能

概要：

1、实现删除功能。

2、实现增加功能。

代码：

css

table,td{border: 1px solid #ccc;border-collapse: collapse;}table,fieldset{width: 1090px;margin:20px auto;text-align: center;}

html

<div id="app"><table><tr><th>ID</th><th>书名</th><th>作者</th><th>价格</th><th>操作</th></tr><!-- 循环输出数据 --><tr v-for="(book,index) in books"><td>{{book.id}}</td><td>{{book.name}}</td><td>{{book.author}}</td><td>{{book.price}}</td><!-- 点击删除，即将newBooks增添到book里面 --><td><input @click="del(index)" type="button" value="删除"></td></tr></table><fieldset><legend>添加新书</legend><p>书名：<input v-model="newBooks.name" type="text"></p><p>作者：<input v-model="newBooks.author" type="text"></p><p>价格：<input v-model="newBooks.price" type="text"></p><!-- 点击增加，即将newBooks增添到book里面 --><p><button @click="add">添加</button></p></fieldset></div>

js

new Vue({el:'#app',data:{books:[{id:1,name:'三国演义',author:'罗贯中',price:88.88},{id:2,name:'红楼梦',author:'曹雪芹',price:88.88},{id:3,name:'水浒传',author:'施耐庵',price:88.88},{id:4,name:'西游记',author:'吴承恩',price:88.88},],newBooks:{id:0,name:'',author:'',price:'',}},methods:{del:function(idx){this.books.splice(idx,1);//删除},add:function(){var maxId=0;//找出最大IDfor(var i=0;i<this.books.length;i++){if(maxId<this.books[i].id){maxId=this.books[i].id;}}this.newBooks.id=maxId+1;this.books.push(this.newBooks);//追加this.newBooks={};//清空}}});