Vue小练习-制作简易购物车效果

这篇博客展示了使用Vue.js进行的一个小实践,详细介绍了如何制作一个简单的购物车效果。通过代码展示,实现了最终的购物车展示效果。

Vue小练习-制作简易购物车效果

上代码!!!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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>
                        
import java.util.HashMap; import java.util.Map; import java.util.Map.Entry; import java.util.Set; /** * 购物车类 */ public class Cart { //创建一个map对象,用来保存商品,key为商品,value为商品的数量 private Map<Goods, Integer> map = new HashMap<Goods, Integer>(); /** * 添加商品到购物车方法 * @param id 商品编号 * @param quantity 商品数量 */ public void addGoods(int id, int quantity){ Goods goods = GoodsDB.goodsMap.get(id); if(goods!=null){ Integer oQuantity = map.get(goods);//获取商品在购物车中原本的数量 if(oQuantity!=null){ oQuantity += quantity; }else{ oQuantity = quantity; } map.put(goods, oQuantity);//添加商品到map中 System.out.println("添加商品"+goods.getName()+"成功!"); }else{ System.out.println("添加失败!商品编号不存在!"); } } /** * 按指定的编号删除商品 * @param id 商品编号 */ public void delGoods(int id){ Goods goods = GoodsDB.goodsMap.get(id); if(goods!=null){ map.remove(goods);//从map删除商品 System.out.println("删除商品"+goods.getName()+"成功!"); }else{ System.out.println("删除失败!商品编号不存在!"); } } /** * 修改商品数量方法 * @param id 商品编号 * @param quantity 要修改的商品数量 */ public void updateGoods(int id, int quantity){ Goods goods = GoodsDB.goodsMap.get(id); if(goods!=null){ map.put(goods, quantity);//从map删除商品 }else{ System.out.println("修改失败!商品编号不存在!"); } } /** * 打印购物车商品列表 */ public void show(){ Set<Entry<Goods, Integer>> entrySet = map.entrySet(); System.out.println("编号\t单价\t数量\t名称\t总价"); for(Entry<Goods, Integer> entry:entrySet){ Goods goods = entry.getKey(); Integer quantity = entry.getValue(); System.out.println(goods.getId()+"\t"+goods.getPrice()+"\t"+quantity+"\t"+goods.getName()+"\t"+goods.getPrice()*quantity); } } }
### Vue.js 实现简单版购物车案例 #### 创建 Vue 项目并引入 Vue.js 库 为了创建一个简单的购物车应用程序,首先需要设置好开发环境。如果是在本地环境中进行开发,则可以按照如下方式引入开发版本的 Vue.js: ```html <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> ``` 对于生产环境而言,推荐使用压缩后的版本以减少加载时间[^2]。 #### HTML 结构定义 接下来,在HTML文件中构建页面结构,包括商品列表以及操作按钮等元素: ```html <div id="app"> <h1>简易购物车</h1> <!-- 商品列表 --> <ul> <li v-for="(item, index) in items" :key="index"> {{ item.name }} - ¥{{ item.price }} <button @click="addItemToCart(index)">加入购物车</button> </li> </ul> <!-- 购物车详情 --> <div v-if="cart.length > 0"> <h2>我的购物车</h2> <ul> <li v-for="(product, idx) in cart" :key="idx">{{ product.name }} - ¥{{ product.price }}</li> </ul> 总价:<strong>{{ totalPrice }}</strong> </div> <p v-else>您的购物车为空。</p> </div> ``` 这段代码通过`v-for`指令遍历显示商品项,并允许用户点击“加入购物车”的按钮将选定的商品添加至购物车内;同时也能够动态更新已购商品的信息及其总金额。 #### JavaScript逻辑编写 最后一步是处理业务逻辑部分,即如何响应用户的交互行为并将数据变化反映到界面上去。这里采用Vue实例化的方式完成初始化配置工作: ```javascript new Vue({ el: '#app', data() { return { items: [ { name: '苹果', price: 3 }, { name: '香蕉', price: 2 } ], cart: [] }; }, computed: { totalPrice() { let sum = this.cart.reduce((acc, curVal) => acc + curVal.price, 0); return sum; } }, methods: { addItemToCart(idx) { const selectedItem = this.items[idx]; this.cart.push(selectedItem); // 将所选物品推入购物车数组 } } }); ``` 上述脚本实现了基本的数据模型定义、计算属性(用于实时计算总价)、以及方法函数(负责向购物车中增加新条目),从而构成了完整的购物车功能模块[^3]。 #### 扩展练习 考虑到更复杂的应用场景,还可以尝试以下改进措施: - 增加全选/取消全选的功能; - 对商品按类别分组展示; - 提供批量删除选项等功能特性。 以上就是基于Vue框架搭建的一个基础型在线购物系统的全部内容介绍与实现步骤说明。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值