tianyunperfect
/
web-base--


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
							<!DOCTYPE html>
<html>
<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>
</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>

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

                </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"/>
                    </div>

                </div>

                <h3>添加书籍</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>

            <!--  修改书籍   -->
            <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">
                </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="updatedBook()">完成</button>
            </div>

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

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

        el: "#app",
        // 计算函数 动态变化的数据

        methods: {     //   写函数

            addBook: function () {

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

            },

            delBook: function (book) {
                var blength = this.books.length;
                this.books.splice(book.id - 1, 1);

                for (var i = 0; i < blength; 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;

            },

            // 修改完成后的 确认按钮点击事件
            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 = {};

            }

        },

        // 计算属性（过滤） 查询功能

        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 中的过滤器

                return books.filter(function (book) {
                    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>

</body>
</html>