當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

基于Vue开发的购物车案例

發布時間：2023/11/28 生活经验 28 豆豆

生活随笔收集整理的這篇文章主要介紹了基于Vue开发的购物车案例小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

需求：具有增加數量、減少數量、移除書信息、計算總價等功能。

HTML：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>書籍購物車</title><link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app"><div v-if="books.length"><table><thead><tr><th></th><th>書籍名稱</th><th>出版日期</th><th>價格</th><th>購買數量</th><th>操作</th></tr></thead><tbody><tr v-for="(book,index) in books"><td>{{book.id}}</td><td>{{book.name}}</td><td>{{book.date}}</td><td>{{book.price | showPrice}}</td><td><button @click="sub(index)" :disabled="book.count<=1">-</button>{{book.count}}<button @click="add(index)">+</button></td><td><button @click="removeHandler(index)">移除</button></td></tr></tbody></table><h2>總價格：{{totalPrice | showPrice}}</h2></div><h2 v-else>購物車為空</h2>
</div><script src="../js/vue.js"></script>
<script src="main.js"></script>
</body>
</html>

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-color: #f7f7f7;color: #5c6b77;font-weight: 600;
}

Vuejs

const app = new Vue({el: '#app',data: {books: [{id: 1,name: '《算法導論》',date: '2006-9',price: 85.00,count: 1},{id: 2,name: '《UNIX編程藝術》',date: '2006-2',price: 59.00,count: 1},{id: 3,name: '《編程珠璣》',date: '2008-10',price: 39.00,count: 1},{id: 4,name: '《數據結構與算法分析》',date: '2016-9',price: 79.00,count: 1},{id: 5,name: '《計算機網絡》',date: '2012-9',price: 119.00,count: 1}]},methods: {sub(index) {this.books[index].count--;},add(index) {this.books[index].count++;},removeHandler(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;}},filters: {showPrice(price) {return '￥' + price.toFixed(2);}}
})

總結

以上是生活随笔為你收集整理的基于Vue开发的购物车案例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。