|
|
@@ -1,12 +1,9 @@
|
|
|
<!DOCTYPE html>
|
|
|
-<html>
|
|
|
+<html lang="cn">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<title>Vue Demo</title>
|
|
|
<style>
|
|
|
- #update-book {
|
|
|
- display: none;
|
|
|
- }
|
|
|
</style>
|
|
|
<link rel="stylesheet" href="../tmp/bootstrap.min.css">
|
|
|
<script src="../tmp/vue.min.js"></script>
|
|
|
@@ -36,18 +33,10 @@
|
|
|
<td>{{book.name}}</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>
|
|
|
+ <td class="text-left">
|
|
|
+ <button type="button" class="btn btn-success" @click="delBook(book)">删除</button>
|
|
|
+ <button type="button" class="btn btn-success" @click="updateBook(book)">修改</button>
|
|
|
+ </td>
|
|
|
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
@@ -63,45 +52,30 @@
|
|
|
请输入查询书名：
|
|
|
</div>
|
|
|
<div class="col-md-5" style="text-align: left;">
|
|
|
- <input type="text" class="form-control" v-model="search"/>
|
|
|
+ <input type="text" class="form-control" v-model="search"></input>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
- <h3>添加书籍</h3>
|
|
|
+ <h3 v-if="book.id">修改书籍</h3>
|
|
|
+ <h3 v-else>新增书籍</h3>
|
|
|
<hr/>
|
|
|
<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>
|
|
|
- </div>
|
|
|
+ <label>书名
|
|
|
+ <input type="text" class="form-control" id="group" v-model="book.name">
|
|
|
+ </label>
|
|
|
|
|
|
- <!-- 修改书籍 -->
|
|
|
- <div id="update-book">
|
|
|
- <h3>修改书籍</h3>
|
|
|
- <hr/>
|
|
|
- <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">
|
|
|
+ <label>作者<input type="text" class="form-control" id="author" v-model="book.author"></label>
|
|
|
+
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
- <label for="price1">价格</label>
|
|
|
- <input type="text" class="form-control" id="price1" v-model="book.price">
|
|
|
+ <label>价格<input type="text" class="form-control" id="price" v-model="book.price"></label>
|
|
|
+
|
|
|
</div>
|
|
|
- <button class="btn btn-primary btn-block" v-on:click="updatedBook()">完成</button>
|
|
|
+ <button class="btn btn-primary btn-block" v-on:click="addBook()" v-if="book.id===0">添加</button>
|
|
|
+ <button class="btn btn-primary btn-block" v-on:click="updatedBook()" v-else>修改</button>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
@@ -114,7 +88,44 @@
|
|
|
|
|
|
el: "#app",
|
|
|
// 计算函数 动态变化的数据
|
|
|
+ data: {
|
|
|
+ book: {
|
|
|
+ id: 0,
|
|
|
+ author: '',
|
|
|
+ name: '',
|
|
|
+ price: ''
|
|
|
+ },
|
|
|
+ books: [{
|
|
|
+ id: 1,
|
|
|
+ author: '曹雪芹',
|
|
|
+ name: '红楼梦',
|
|
|
+ price: 36.00
|
|
|
+ }, {
|
|
|
+ id: 2,
|
|
|
+ author: '曹雪芹',
|
|
|
+ name: '三国演义',
|
|
|
+ price: 37.00
|
|
|
+ }, {
|
|
|
+ id: 3,
|
|
|
+ author: '曹雪芹',
|
|
|
+ name: 'Good boy',
|
|
|
+ price: 85.00
|
|
|
+ }, {
|
|
|
+ id: 4,
|
|
|
+ author: '曹雪芹',
|
|
|
+ name: '红楼梦',
|
|
|
+ price: 39.00
|
|
|
+
|
|
|
+ }],
|
|
|
|
|
|
+ search: "", // 查询功能，""中不能加空格，否则默认查询空格
|
|
|
+ isUpdate: false,
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ "book.id": (newValue) => {
|
|
|
+ this.isUpdate = newValue !== 0;
|
|
|
+ }
|
|
|
+ },
|
|
|
methods: { // 写函数
|
|
|
|
|
|
addBook: function () {
|
|
|
@@ -126,10 +137,9 @@
|
|
|
},
|
|
|
|
|
|
delBook: function (book) {
|
|
|
- var blength = this.books.length;
|
|
|
+ const blength = this.books.length;
|
|
|
this.books.splice(book.id - 1, 1);
|
|
|
-
|
|
|
- for (var i = 0; i < blength; i++) {
|
|
|
+ for (let i = 0; i < blength; i++) {
|
|
|
if (book.id < this.books[i].id) {
|
|
|
this.books[i].id -= 1;
|
|
|
}
|
|
|
@@ -138,90 +148,33 @@
|
|
|
|
|
|
// 修改按钮
|
|
|
updateBook: function (book) {
|
|
|
-
|
|
|
- $("#add-book").css("display", "none");
|
|
|
- $("#update-book").css("display", "block");
|
|
|
- id = book.id;
|
|
|
-
|
|
|
+ this.book = book
|
|
|
},
|
|
|
|
|
|
// 修改完成后的 确认按钮点击事件
|
|
|
updatedBook: 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 = {};
|
|
|
-
|
|
|
+ this.book = {
|
|
|
+ id: 0,
|
|
|
+ author: '',
|
|
|
+ name: '',
|
|
|
+ price: ''
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
// 计算属性（过滤） 查询功能
|
|
|
-
|
|
|
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;
|
|
|
- */
|
|
|
- // vue 中的过滤器
|
|
|
-
|
|
|
+ const books = this.books;
|
|
|
+ const search = this.search;
|
|
|
return books.filter(function (book) {
|
|
|
- return book.name.toLowerCase().indexOf(search.toLocaleLowerCase()) != -1
|
|
|
+ return book.name.toLowerCase().indexOf(search.toLocaleLowerCase()) !== -1
|
|
|
});
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
- data: {
|
|
|
- book: [{
|
|
|
- id: 0,
|
|
|
- author: '',
|
|
|
- name: '',
|
|
|
- price: ''
|
|
|
- }],
|
|
|
-
|
|
|
- books: [{
|
|
|
- id: 1,
|
|
|
- author: '曹雪芹',
|
|
|
- name: '红楼梦',
|
|
|
- price: 36.00
|
|
|
- }, {
|
|
|
- id: 2,
|
|
|
- author: '曹雪芹',
|
|
|
- name: '三国演义',
|
|
|
- price: 37.00
|
|
|
- }, {
|
|
|
- id: 3,
|
|
|
- author: '曹雪芹',
|
|
|
- name: 'Good boy',
|
|
|
- price: 85.00
|
|
|
- }, {
|
|
|
- id: 4,
|
|
|
- author: '曹雪芹',
|
|
|
- name: '红楼梦',
|
|
|
- price: 39.00
|
|
|
-
|
|
|
- }],
|
|
|
-
|
|
|
- search: "" // 查询功能，""中不能加空格，否则默认查询空格
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
|
|
|
})
|
|
|
</script>
|
tianyun