Vue實現(xiàn)小購物車功能
更新時間：2020年12月21日 11:30:50 作者：.你別皺眉
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)小購物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Vue實現(xiàn)小購物車功能的具體代碼，供大家參考，具體內(nèi)容如下
本人還在初級學(xué)習(xí)階段，有很多不足之處，希望能指出錯誤，一起進(jìn)步
HTML代碼塊
<body>
<div id="app">
<div v-if="books.length">
<table>
<thead>
<tr>
<th></th>
<th>書籍名稱</th>
<th>出版日期</th>
<th>價格</th>
<th>購買數(shù)量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(itme,index) in books">
<td>{{itme.id}}</td>
<td>{{itme.name}}</td>
<td>{{itme.date}}</td>
<!-- showPrice過濾器 -->
<td>{{itme.price | showPrice}}</td>
<td>
<!-- 動態(tài)綁定disabled，當(dāng)數(shù)量小于1時 禁止點擊按鈕-->
<button @click="decrement(index)" :disabled="itme.count <= 1">-</button>
{{itme.count}}
<button @click="increment(index)">+</button>
</td>
<td><button @click="Handle(index)">移除</button></td>
</tr>
</tbody>
</table>
<h2>總價格：{{totalPrice | showPrice}}</h2>
</div>
<h2 v-else>購物車為空</h2>
</div>
</body>
css代碼塊
table{
border: 1px solid #e9e9e9;
border-collapse: collapse;
border-spacing: 0;
}
th,td{
padding: 8px 16px;
border: 1px solid #e9e9e9;
text-align: left;
}
th{
background: #f7f7f7;
color: #5c6b77;
font-weight: 600;
}
Vue.js代碼塊
const app = new Vue({
el:'#app',
data:{
books:[
{
id:1,
name:'《算法議論》',
date:'2001-1',
price:85.00,
count:1
},
{
id:2,
name:'《編程珠璣》',
date:'2002-1',
price:65.00,
count:1
},
{
id:3,
name:'《Unix編程藝術(shù)》',
date:'2000-1',
price:59.00,
count:1
},
{
id:4,
name:'《代碼大全》',
date:'2005-1',
price:135.00,
count:1
},
]
},
/**
* 使用普通方法
*/
methods:{
//獲取小數(shù)點的方法
// getFinalPrice(price){
// return '￥' + price.toFixed(2);
// }
//點擊事件
increment(index){
this.books[index].count++;
},
decrement(index){
this.books[index].count--;
},
Handle(index){
this.books.splice(index,1);
}
},
computed:{
totalPrice(){
let totalPrice = 0;
for(let i = 0; i < this.books.length; i++){
totalPrice += this.books[i].price * this.books[i].count;
}
return totalPrice;
}
},
/**
* 使用過濾器獲取小數(shù)點
*/
filters:{
showPrice(price){
return '￥' + price.toFixed(2);
}
}
})
效果如圖：
還有很多不足之處，希望大家能指出。
關(guān)于vue.js的學(xué)習(xí)教程，請大家點擊專題vue.js組件學(xué)習(xí)教程、Vue.js前端組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue.js下拉菜單組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要給大家介紹了關(guān)于vue3中nextTick()應(yīng)用的相關(guān)資料,nextTick()等待下一次DOM更新刷新的工具方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue--Router動態(tài)路由的用法,很多時候，我們需要將給定匹配模式的路由映射到同一個組件，在?Vue?Router?中，我們可以在路徑中使用一個動態(tài)字段來實現(xiàn)，我們稱之為路徑參數(shù)，本文對Vue?Router動態(tài)路由相關(guān)知識給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-08-08
這篇文章主要為大家介紹了vuex的核心概念和基本使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
Vue聲明式導(dǎo)航與編程式導(dǎo)航示例分析講解
這篇文章主要介紹了Vue中聲明式導(dǎo)航與編程式導(dǎo)航，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-11-11
vuex實現(xiàn)登錄狀態(tài)的存儲,未登錄狀態(tài)不允許瀏覽的方法
下面小編就為大家分享一篇vuex實現(xiàn)登錄狀態(tài)的存儲,未登錄狀態(tài)不允許瀏覽的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
最近遇到一個需求,需要把內(nèi)容下載生成pdf文件,但轉(zhuǎn)換過程中內(nèi)容總是會被截斷,就很難受,從網(wǎng)上找到了解決辦法分享給大家,這篇文章主要給大家介紹了關(guān)于vue生成pdf文件步驟及pdf分頁隔斷處理的相關(guān)資料,需要的朋友可以參考下2024-02-02
動態(tài)組件指的是動態(tài)切換組件的顯示與隱藏,下面這篇文章主要給大家介紹了關(guān)于Vue動態(tài)組件和keep-alive組件的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vue中組件如何使用vue-quill-editor問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要給大家分享一個開發(fā)中常見的需求，接下來將為大家詳細(xì)介紹彈幕的實現(xiàn)以及設(shè)計思路一步一步描述出來，希望大家能夠喜歡2023-06-06