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實現的管理系統就大致完成了。