<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图书管理系统</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<script src="js/vue.js"></script>
<style type="text/css">
#update-book{
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-6 col-md-offset-3">
<h1>Vue demo</h1>
<div id="app">
<table class="table table-hover ">
<br />
<thead>
<tr>
<th>序号</th>
<th>书名</th>
<th>作者</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="book in filterBooks">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.author}}</td>
<td>{{book.price}}</td>
<template v-if="book.id%2==0">
<td class="text-left">
<button type="button" class="btn btn-success" class="del" @click="delBook(book)">删除</button>
<button type="button" class="btn btn-success" @click="updateBook(book)" >修改</button>
</td>
</template>
<template v-else>
<td class="text-left">
<button type="button" class="btn btn-danger" class="del" @click="delBook(book)">删除</button>
<button type="button" class="btn btn-danger" @click="updateBook(book)" >修改</button>
</td>
</template>
</tr>
</tbody>
</table>
<div id="add-book">
<div class="row" style="margin-bottom: 30px;">
<div class="col-md-3" style="text-align: right;font-size: 16px;line-height: 30px;">
请输入书名：
</div>
<div class="col-md-5">
<input type="text" class="form-control" v-model="search"/>
</div>
</div>
<h3>添加书籍</h3>
<hr />
<div class="form-group">
<label for="group">书名</label>
<input type="text" class="form-control" v-model="book.name" id="group">
</div>
<div class="form-group">
<label for="author">作者</label>
<input type="text" class="form-control" v-model="book.author" id="author">
</div>
<div class="form-group">
<label for="price">价格</label>
<input type="text" class="form-control" v-model="book.price" id="price">
</div>
<button class="btn btn-primary btn-block" v-on:click="addBook()">添加</button>
</div>
<div id="update-book">
<h3>修改书籍</h3>
<hr />
<div class="form-group">
<label for="group1">书名</label>
<input type="text" class="form-control" v-model="book.name" id="group1">
</div>
<div class="form-group">
<label for="author1">作者</label>
<input type="text" class="form-control" id="author1" v-model="book.author">
</div>
<div class="form-group">
<label for="price1">价格</label>
<input type="text" class="form-control" id="price1" v-model="book.price">
</div>
<button class="btn btn-primary btn-block" @click="updatesBook()"
>完成</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script src="js/demo.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
js文件
var id = 0;
var app = new Vue({
el:'#app',
methods:{
addBook:function(){
this.book.id = this.books.length+1;
this.books.push(this.book);
this.book={};
},
delBook:function(book){
var blength=this.books.length;
this.books.splice(book.id-1,1);
for(var i=0;i<blength;i++){
if (book.id<this.books[i].id) {
this.books[i].id -= 1;
}
}
},
updateBook:function(book){
$("#add-book").css("display","none");
$("#update-book").css("display","block");
id = book.id;
},
updatesBook:function(){
this.book.id = id;
this.books.splice(id-1,1,this.book);
$("#add-book").css("display","block");
$("#update-book").css("display","none");
this.book={};
}
},
computed:{
filterBooks:function(){
var books=this.books;
var search=this.search;
/*if (!search) {
return books;
}
var arr=[];
for(var i=0;i<books.length;i++){
var index = books[i].name.indexOf(search);
if (index>-1) {
arr.push(books[i]);
}
}
return arr;*/
//第二种方法
return books.filter(function(book){
return book.name.toLowerCase().indexOf(search.toLowerCase())!=-1;
});
}
},
data:{
book:{
id:0,
author:'',
name:'',
price:''
},
books:[{
id:1,
author:'曹雪芹',
name:'红楼梦',
price:32.0
},
{
id:2,
author:'施耐庵',
name:'水浒传',
price:55.0
},
{
id:3,
author:'罗贯中',
name:'三国演义',
price:41.0
},
{
id:4,
author:'吴承恩',
name:'西游记',
price:39.0
}],
search:""
}
})
