基于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开发的购物车案例相关推荐

基于Vue开发的电商APP项目——蘑菇街app
基于Vue开发的电商APP项目--蘑菇街项目源码:https://github.com/Limna777/Shopmall.git 1.项目描述 2.使用的插件或第三方库 3.页面主要实现的功能 1 ...
value数字 vue_基于Vue开发数字输入框组件
随着 vue 越来越火热, 相关组件库也非常多啦, 只用轮子怎么够, 还是要造起来!!! 1.概述 vue组件开发的api:props.events和slots 2.组件代码效果: (1)index ...
2021年基于VUE开发的一套移动端APP小说听书AI男女多种支持云端存储书籍记录
2021年基于VUE开发的一套移动端APP小说前端架构主要采用: "axios": "^0.21.1", "better-scroll": ...
基于vue开发的移动端（仿蘑菇街，淘宝）电商项目
基于vue.js的知识点(webpack,Vuex,Vue-router,axios)开发电商手机网站项目组件库:vantUI.ElementUI 码云地址:https://gitee.com/YG ...
vue 音乐盒app_VBox 一款基于vue开发的音乐盒序章
自己基于vue写了一个 Mplayer, 只有简单的搜索播放随心听功能,样式适配上也很差, 路由就两个,数据都走vuex,数据转发是用nodejs自己转发,而且只是PC能比较好的展现,之后不了了之,偶 ...
基于Vue开发一个日历组件
最近在做一个类似课程表的需求,需要自制一个日历来支持功能及展现,就顺便研究一下应该怎么开发日历组件. 更新 2.23修复了2026年2月份会渲染多一行的bug,谢谢@深蓝一人童鞋提出的bug,解决方案 ...
移动Web体验月报（6月）：MIP 核心代码升级，增加基于 Vue 开发能力
原创: BrilliantOpenWeb OpenWeb开发者 7月6日作者 | Brilliant Open Web 团队编辑 | Daisy 升级与重要进展历时2个月,MIP团队完成了核心代 ...
npm 编译打包vue_从零到一教你基于vue开发一个组件库
前言 Vue是一套用于构建用户界面的渐进式框架,目前有越来越多的开发者在学习和使用.在笔者写完徐小夕:如何从0到1教你搭建前端团队的组件系统zhuanlan.zhihu.com 之后很多朋友希望了 ...
我的第一个Chrome小插件-基于vue开发的flexbox布局CSS拷贝工具
概述之前介绍过移动Web开发基础-flex弹性布局(兼容写法) 里面有提到过想做一个Chrome插件,来生成flexbox布局的css代码直接拷贝出来用.最近把这个想法实现了,给大家分享下. pl ...

基于Vue开发的购物车案例

基于Vue开发的购物车案例相关推荐

最新文章

热门文章