在上一篇文章中我们已经学习了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实现的管理系统就大体完成了。
来源: http://www.cnblogs.com/zzzzyy/p/7787596.html