vue小项目---管理系统

在上一篇文章中我们已经学习了vue的基本语法，常用属性，了解了vue的基本使用，现在让我们用vue配合Bootstrap来完成一个小项目。

首先导入Bootstap文件。

<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>

导入完成后，用Boostrap的各种组件，完成一个基本的页面：

 <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.name}}</td>

                                <td>{{book.author}}</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-3" style="text-align: right;font-size: 16px;line-height: 30px;">

                            请输入书名

                        </div>

                        <div class="col-md-5">

                            <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" @click="updatesBook">完成</button>

                    </div>

                </div>

            </div>

        </div>

这样页面我们就做好了，效果如下：

然后导入vue文件

<script src="js/vue.min.js"></script>

新建一个自己的JS文件

首先完成添加功能：

new Vue({

    el:"#app",

        methods:{

            addBook:function(){

            this.book.id = this.books.length+1;

            this.books.push(this.book);

            this.book={};

        }，

        }

将addBook函数用v-on:click指令绑定到添加按钮上。

这样添加功能就完成了。

测试一下：

然后我们再完成删除功能：

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;

        },

        updatesBook: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 = {};

         }

    },

这样利用vue实现的管理系统就大体完成了。

巴特西

vue小项目---管理系统

最新文章

热门文章