该项目主要是练习vue的基础语法，其中涉及到`v-model`数据双向绑定、事件绑定的修饰符（阻止默认事件发生）、过滤器。项目使用的是bootstrap的css样式进行布局，实现了图书的动态增加、动态查找的功能。
最终效果：
源码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <title>图书管理系统</title> </head> <body> <div id="app"> <div class="container"> <h1>图书管理系统</h1> <hr> <form class="form-inline col-md-9"> <div class="form-group"> <label for="BookName">书名：</label> <input type="text" class="form-control" id="BookName" placeholder="书名" v-model="add_book.name"> </div> <div class="form-group"> <label for="BookAuthor">作者：</label> <input type="text" class="form-control" id="BookAuthor" placeholder="作者" v-model="add_book.author"> </div> <div class="form-group"> <label for="BookPrice">价格：</label> <input type="text" class="form-control" id="BookPrice" placeholder="价格" v-model="add_book.price"> </div> <button type="button" class="btn btn-default" @click.prevent="addBook">添加</button> </form> <form class="form-inline col-md-3"> <div class="form-group"> <label for="BookAuthor">书名：</label> <input type="text" class="form-control " v-model="keyWord" placeholder="输入关键字"> </div> </form> <br> <hr> <table class="table table-striped"> <thead> <tr> <th>序号</th> <th>书名</th> <th>作者</th> <th>价格</th> <th>时间</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="book,index in book_ret" key="book.name"> <td>{{index + 1 }}</td> <td>{{book.name}}</td> <td>{{book.author}}</td> <td>{{book.price}}</td> <td>{{book.date|timeFormat}}</td> <td><button class="btn btn-danger" @click="del">删除</button></td> </tr> </tbody> </table> </div> </div> <script> new Vue({ el: "#app", data: { books: [{ name: "红楼梦", author: "曹雪芹", price: "109", date: new Date() }, { name: "西游记", author: "吴承恩", price: 179, date: new Date() } ], add_book: { name: "", author: "", price: 0, date: new Date() }, keyWord: "" }, computed: { // 为了增加查询功能 book_ret() { const that = this; if (this.keyWord) { // 遍历books对象，进行筛选 let newBooks = this.books.filter(function (item) { // 如果item的name中包含keyWord则将其添加到newBooks对象中 if (item.name.indexOf(that.keyWord) >= 0) { return true } else { return false } }) return newBooks } else { return this.books } } }, methods: { addBook() { // 为了解决输入框改变新添加的数据也改变，此时需要将`this.add_book`给到另外一个对象 // JSON.stringify：将json格式的数据转换为字符串 // JSON.parse：将字符串转换为json格式的数据 let book = JSON.parse(JSON.stringify(this.add_book)) this.books.push(book) // 清空输入框内容 this.add_book = { name: "", author: "", price: 0, date: new Date() } }, del(index) { books.splice(index, 1) } }, filters: { timeFormat: function (value) { value = new Date(value) let year = value.getFullYear() let month = value.getMonth() + 1 let day = value.getDate() let hour = value.getHours() let minute = value.getMinutes() return `${year} - ${month} - ${day} ${hour}:${minute}` } } }) </script> </body> </html>