tianyunperfect
/
web-base--


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
							<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
    <style>
    </style>
    <link rel="stylesheet" href="../tmp/bootstrap.min.css">
    <script src="../tmp/vue.min.js"></script>
</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.author}}</td>
                    <td>{{book.name}}</td>
                    <td>{{book.price}}</td>

                    <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>

            </table>

            <!--  添加书籍   -->
            <div id="add-book">
                <!--查询输入框-->
                <div class="row" style="margin-bottom: 30px;">

                    <div class="col-md-4" style="text-align: left;font-size: 16px;line-height: 30px;">
                        请输入查询书名：
                    </div>
                    <div class="col-md-5" style="text-align: left;">
                        <input type="text" class="form-control" v-model="search"></input>
                    </div>

                </div>

                <h3 v-if="book.id">修改书籍</h3>
                <h3 v-else>新增书籍</h3>
                <hr/>
                <div class="form-group">
                    <label>书名
                        <input type="text" class="form-control" id="group" v-model="book.name">
                    </label>

                </div>
                <div class="form-group">
                    <label>作者<input type="text" class="form-control" id="author" v-model="book.author"></label>

                </div>
                <div class="form-group">
                    <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="addBook()" v-if="book.id===0">添加</button>
                <button class="btn btn-primary btn-block" v-on:click="updatedBook()" v-else>修改</button>
            </div>

        </div>
    </div>
</div>

<script>
    var id = 0;
    var vm = new Vue({

        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 () {

                this.book.id = this.books.length + 1;
                this.books.push(this.book);
                this.book = {};

            },

            delBook: function (book) {
                const blength = this.books.length;
                this.books.splice(book.id - 1, 1);
                for (let i = 0; i < blength; i++) {
                    if (book.id < this.books[i].id) {
                        this.books[i].id -= 1;
                    }
                }
            },

            // 修改按钮
            updateBook: function (book) {
                this.book = book
            },

            // 修改完成后的 确认按钮点击事件
            updatedBook: function () {
                this.book = {
                    id: 0,
                    author: '',
                    name: '',
                    price: ''
                }
            }

        },

        // 计算属性（过滤） 查询功能
        computed: {
            filterBooks: function () {
                const books = this.books;
                const search = this.search;
                return books.filter(function (book) {
                    return book.name.toLowerCase().indexOf(search.toLocaleLowerCase()) !== -1
                });
            }

        },


    })
</script>

</body>
</html>