开发笔记:vue.js快速搭建图书管理平台

<div class="container">
<div class="col-md-6 col-md-offset-3">
<h1>Vue demoh1>

<div id="app">
<table class="table table-hover ">
<caption>caption>
<thead>
<tr>
<th>序号th>
<th>书名th>
<th>作者th>
<th>价格th>
<th>操作th>
tr>
thead>
table>

<div id="add-book">
<legend>添加书籍legend>
<div class="form-group">
<label for="group">书名label>
<input type="text" class="form-control" id="group">
div>
<div class="form-group">
<label for="author">作者label>
<input type="text" class="form-control" id="author">
div>
<div class="form-group">
<label for="price">价格label>
<input type="text" class="form-control" id="price">
div>
<button class="btn btn-primary btn-block">添加button>
<button class="btn btn-primary btn-block">查询button>
div>
<div id="update-book">
<legend>修改书籍legend>
<div class="form-group">
<label for="group1">书名label>
<input type="text" class="form-control" id="group1">
div>
<div class="form-group">
<label for="author1">作者label>
<input type="text" class="form-control" id="author1">
div>
<div class="form-group">
<label for="price1">价格label>
<input type="text" class="form-control" id="price1">
div>
<button class="btn btn-primary btn-block">完成button>
div>
div>
div>
div>

new Vue({
el: \'#app\',
data: {
book: {
id: 0,
author: \'\',
name: \'\',
price: \'\'
},
books: [{
id: 1,
author: \'曹雪芹\',
name: \'红楼梦\',
price: 32.0
}, {
id: 2,
author: \'施耐庵\',
name: \'水浒传\',
price: 30.0
}, {
id: \'3\',
author: \'罗贯中\',
name: \'三国演义\',
price: 24.0
}, {
id: 4,
author: \'吴承恩\',
name: \'西游记\',
price: 20.0
}]
}
});

<div id="app">
<table class="table table-hover ">
<caption>caption>
<thead>
<tr>
<th>序号th>
<th>书名th>
<th>作者th>
<th>价格th>
<th>操作th>
tr>
thead>
<tbody>
<tr v-cloak v-for="book in books">
<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" @click="delBook(book)" class="del">删除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" @click="delBook(book)" class="del">删除button>
<button type="button" class="btn btn-danger" @click="updateBook(book)">修改button>
td>
template>
tr>
tbody>
table>

<div id="add-book">
<legend>添加书籍legend>
<div class="form-group">
<label for="group">书名label>
<input type="text" class="form-control" id="group" v-model="book.name">
div>
<div class="form-group">
<label for="author">作者label>
<input type="text" class="form-control" id="author" v-model="book.author">
div>
<div class="form-group">
<label for="price">价格label>
<input type="text" class="form-control" id="price" v-model="book.price">
div>
<button class="btn btn-primary btn-block" v-on:click="addBook()">添加button>
<button class="btn btn-primary btn-block" v-on:click="searchBook()">查询button>
div>
<div id="update-book">
<legend>修改书籍legend>
<div class="form-group">
<label for="group1">书名label>
<input type="text" class="form-control" id="group1" v-model="book.name">
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" v-on:click="updatesBook()">完成button>
div>
div>

addBook: function() {
//计算书的id
this.book.id = this.books.length + 1;
this.books.push(this.book);
//将input中的数据重置
this.book = {};
}

delBook: function(book) {
var blength = this.books.length;
this.books.splice(book.id-1, 1);
for( var i = 0; 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(book) {
this.book.id = id;
this.books.splice(id-1,1,this.book);
$("#add-book").css("display","block");
$("#update-book").css("display","none");
this.book = {};