vue實(shí)現(xiàn)圖書管理demo詳解
更新時間：2017年10月17日 14:55:54 作者：白開水
這篇文章主要介紹了vue實(shí)現(xiàn)圖書管理，分享了圖書管理demo用的知識點(diǎn)，以及遇到問題的總結(jié)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
年后公司的項(xiàng)目要求用到vue.js知識，我angular沒有學(xué)，node.js和react也只是了解了一點(diǎn)點(diǎn)，所以學(xué)起來比較困難。如果你想學(xué)vue.js的知識，推薦網(wǎng)址：http://vuejs.org/
詳細(xì)內(nèi)容如下：
一、圖書管理demo用的知識點(diǎn)
1、bootstrap：http://getbootstrap.com/
2、vuejs：http://getbootstrap.com/
具體代碼如下：
html部分
<div id="app" class="container">
<table class="table table-bordered">
<div v-for = "book in books">
<tr>
<th>書名</th>
<th>書的價格</th>
<th>書的數(shù)量</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>
</div>
</table>
<div class="form-group">
<label for="bookname" id="bookname">書名</label>
<input type="text" v-model="list.name" class="form-control"/>
</div>
<div class="form-group">
<label for="bookprice" id="bookprice">價格</label>
<input type="text" v-model="list.price" class="form-control"/>
</div>
<div class="form-group">
<label for="bookcount" id="bookcount">數(shù)量</label>
<input type="text" v-model="list.count" class="form-control"/>
</div>
<div class="form-group">
<button class="btn btn-primary" @click="add">添加</button>
</div>
</div>
腳本部分
<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的方法，在數(shù)組中刪除
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>
遇到難點(diǎn)總結(jié)
當(dāng)數(shù)量小于0時，判斷方法，解決方法有很多種，下面總結(jié)有3中方法
(一)最簡單的方法
根據(jù)邏輯判斷，這里要注意邏輯判斷的順序，代碼如下：
復(fù)制代碼 代碼如下:
<td><button @click="book.count&&book.count--">-</button><input type="text" v-model="book.count" /><button @click="book.count++">+</button></td>
（二）這里要注意this指向問題
復(fù)制代碼 代碼如下:
<td><button @click="min(index,book.count)">-</button><input type="text" v-model="book.count" /><button @click="book.count++">+</button></td>
methods:{
min(index){
if(this.books[index].count>0){
this.books[index].count = parseInt(this.books[index].count) - 1;
}
},
deleteBook(book){
// vue 給我們提供了一個 $remove的方法，在數(shù)組中刪除
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執(zhí)行時傳參問題
復(fù)制代碼 代碼如下:
<td><button @click="min(book)">-</button><input type="text" v-model="book.count" /><button @click="book.count++">+</button></td>
min(book){
if(book.count>0){
book.count = parseInt(book.count) - 1;
}
}
總結(jié)：
v-on執(zhí)行方法的時候需要傳遞參數(shù)的時候添加()，如果不需要傳遞參數(shù)就不用加上()
如果需要傳遞參數(shù)，我們需要手動傳入事件源
建議：
1、如果您有充足的時間來學(xué)習(xí)vue，務(wù)必要把js基礎(chǔ)打好，學(xué)習(xí)下angular.js
2、學(xué)會在網(wǎng)上找資料。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue.Draggable拖拽功能配置使用的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了詳解vue簡單的store，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-10-10
Vue 實(shí)現(xiàn)CLI 3.0 + momentjs + lodash打包時優(yōu)化
今天小編就為大家分享一篇Vue 實(shí)現(xiàn)CLI 3.0 + momentjs + lodash打包時優(yōu)化，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
解決vue的touchStart事件及click事件沖突問題
這篇文章主要介紹了解決vue的touchStart事件及click事件沖突問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue-cli提供的腳手架只是一個最基礎(chǔ)的，也可以說是Vue團(tuán)隊認(rèn)為的工程結(jié)構(gòu)的一種最佳實(shí)踐。這篇文章主要介紹了vue-cli的工程模板與構(gòu)建工具 ,需要的朋友可以參考下2018-09-09
關(guān)于vue項(xiàng)目proxyTable配置和部署服務(wù)器的問題
這篇文章主要介紹了關(guān)于vue項(xiàng)目proxyTable配置和部署服務(wù)器的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
如何使用Vue3設(shè)計實(shí)現(xiàn)一個Model組件淺析
v-model在Vue里面是一個語法糖,數(shù)據(jù)的雙向綁定,本質(zhì)上還是通過 自定義標(biāo)簽的attribute傳遞和接受,下面這篇文章主要給大家介紹了關(guān)于如何使用Vue3設(shè)計實(shí)現(xiàn)一個Model組件的相關(guān)資料,需要的朋友可以參考下2022-08-08
vue組件表單數(shù)據(jù)回顯驗(yàn)證及提交的實(shí)例代碼
今天小編就為大家分享一篇vue組件表單數(shù)據(jù)回顯驗(yàn)證及提交的實(shí)例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要給大家介紹了關(guān)于vue路由教程之靜態(tài)路由的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
解決Vue+Electron下Vuex的Dispatch沒有效果問題
這篇文章主要介紹了Vue+Electron下Vuex的Dispatch沒有效果的解決方案 ,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05