Vue小作业--图书管理

　　该项目主要是练习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/[email protected]/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>
Vue小作业--图书管理

猜你喜欢
