使用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;
				//找出最大ID
				for(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={};//清空
			}

		}
	});