本文主要介紹了vue實現圖書管理,分享了圖書管理demo用的知識點,以及遇到問題的總結,具有一定的參考價值,有興趣的小伙伴們可以參考一下,希望能幫助到大家。
年後公司的專案要求用到vue.js知識,我angular沒有學,node.js和react也只是了解了一點點,所以學起來比較困難。如果你想學vue.js的知識,推薦網址:http://vuejs.org/
詳細內容如下:
一、圖書管理demo用的知識點
1、bootstrap:http://getbootstrap.com/
2、vuejs:http://getbootstrap.com/
#具體程式碼如下:
html部分
<p id="app" class="container"> <table class="table table-bordered"> <p v-for = "book in books"> <tr> <th>书名</th> <th>书的价格</th> <th>书的数量</th> <th>小计</th> <th>操作</th> </tr> <tr v-for = "(index,book ) in books"> <td>{{book.name}}</td> <td>{{book.price}}</td> <td><button @click="book.count&&book.count--">-</button><input type="text" v-model="book.count" /><button @click="book.count++">+</button></td> <td>{{book.price*book.count}}</td> <td><button class="btn btn-danger" @click="deleteBook(book)">删除</button></td> </tr> <tr> <td colspan="5"> 总价{{total}} </td> </tr> </p> </table> <p class="form-group"> <label for="bookname" id="bookname">书名</label> <input type="text" v-model="list.name" class="form-control"/> </p> <p class="form-group"> <label for="bookprice" id="bookprice">价格</label> <input type="text" v-model="list.price" class="form-control"/> </p> <p class="form-group"> <label for="bookcount" id="bookcount">数量</label> <input type="text" v-model="list.count" class="form-control"/> </p> <p class="form-group"> <button class="btn btn-primary" @click="add">添加</button> </p> </p>
腳本部分
<script src="js/vue.js"></script> <script> var vm = new Vue({ el:"#app", data:{ books:[ {name:'VUE js',price:40,count:1}, {name:'NODE js',price:20,count:1}, {name:'REACT js',price:30,count:1}, {name:'ANGULAR js',price:100,count:1}, {name:'JQUERY js',price:50,count:1}, ], list:{ name:'', price:'', count:'' } }, methods:{ deleteBook(book){ // vue 给我们提供了一个 $remove的方法,在数组中删除 this.books.$remove(book); /*this.books = this.books.filter((item)=>{ return item != book })*/ }, add(){ this.books.push(this.list); this.list = { name:'', price:'', count:'' } } }, computed:{ total(){ var sum = 0; this.books.forEach(item =>{ sum += item.price*item.count; }) return sum; } } }); </script>
遇到困難總結
當數量小於0時,判斷方法,解決方法有很多種,下面總結有3中方法
#(一)最簡單的方法
根據邏輯判斷,這裡要注意邏輯判斷的順序,程式碼如下:
##複製程式碼代碼如下:b6c5a531a458a2e790c1fd6421739d1c4179bd8b60b988f19df1ccadb093a205-65281c5ac262bf6d81768915a4a77ac0e9bf83320d1a7c32cd980bfbdb6ac100be59ca2c6fdfb6f4fe9580b4ae57cf4b+65281c5ac262bf6d81768915a4a77ac0b90dd5946f0946207856a8a37f441edf
(二)這裡要注意this指向問題
複製程式碼 程式碼如下:
b6c5a531a458a2e790c1fd6421739d1c84574a5af5a877d67541393b14594ae3-65281c5ac262bf6d81768915a4a77ac02e252e5afab52b58f4c1398a7e2222d2be59ca2c6fdfb6f4fe9580b4ae57cf4b+65281c5ac262bf6d81768915a4a77ac0< ;/td>methods:{ min(index){ if(this.books[index].count>0){ this.books[index].count = parseInt(this.books[index].count) - 1; } }, deleteBook(book){ // vue 给我们提供了一个 $remove的方法,在数组中删除 this.books.$remove(book); /*this.books = this.books.filter((item)=>{ return item != book })*/ }, add(){ this.books.push(this.list); this.list = { name:'', price:'', count:'' } } }
(三) v-on執行時傳參問題
複製程式碼
程式碼如下:
b6c5a531a458a2e790c1fd6421739d1ce13d7c23e70a8fe55e3877551ed2812b-65281c5ac262bf6d81768915a4a77ac09c17b84def4107c05daadce6eb1528e1be59ca2c6fdfb6f4fe9580b4ae57cf4b+65281c5ac262bf6d81768915a4a77ac0b90dd5946f0946207856a8a37f441edf
min(book){ if(book.count>0){ book.count = parseInt(book.count) - 1; } }
v-on執行方法的時候需要傳遞參數的時候加(),如果不需要傳遞參數就不用加上() 如果需要傳遞參數,我們需要手動傳入事件來源
相關推薦:vue.js做出書籍管理平台的詳細步驟############圖書管理系統原始碼php 產生隨機驗證碼圖片程式碼############Node.js 切近實戰(二) 之圖書管理系統_html/css_WEB-ITnose#######以上是vue實作圖書管理實例講解的詳細內容。更多資訊請關注PHP中文網其他相關文章!