功能实现-Vue从入门到实战

删除功能

<td><button @click="delBook(index)">删除</button></td>

			methods:{
				delBook:function(idx){//删除当前这本书
					this.books.splice(idx,1);
				}
			}

添加新书

	<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>

完整代码

附完整代码

<!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>