vue2.0购物车和地址选配实例,附演示地址

首先,还是先来演示地址http://redatao.coding.me/shopping-Cart/

:想托管你的项目,让你的小伙伴也能直接通过连接欣赏你的操作,请参考:https://blog.csdn.net/RedaTao/article/details/68483378

下边是效果展示图:

购物车信息:

选配地址信息:

 

 

开发准备

1.开发工具:

我是用的是webstorm,因为这个案例中需要调用数据,而webstorm自带服务器,方便测试,当然使用sublime也可以,不过需要自己搭建一个服务器环境,才能测试数据;

2.需要的相关文件:

     1.1 vue.min.js;

1.2 vue-resource.min.js;

其中resourse主要是进行http请求,以加载数据。

3.课程源码下载:

3.1 demo源码下载地址:https://github.com/Reda011/shopping-demo

3.2 完整案例源码下载地址:https://github.com/Reda011/shopping-cart-

4.视频观看

视频资源来自慕课网:http://www.imooc.com/video/14079

 

 

 

 

 

 

 

 

 

 

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要实现购物车功能,需要以下步骤: 1. 创建一个商品列表,包含每个商品的名称,价格和数量。 2. 在页面上展示商品列表,每个商品都有一个加入购物车的按钮。 3. 点击加入购物车按钮时,将对应商品的信息加入购物车列表中。 4. 在页面上展示购物车列表,包含每个商品的名称,价格,数量和小计金额。 5. 可以对购物车中的商品进行删除或修改数量操作。 6. 计算购物车中所有商品的总价。 下面是一个简单的 Vue 2.0 实现购物车功能的示例代码: HTML: ``` <div id="app"> <h2>商品列表</h2> <ul> <li v-for="item in goods"> {{ item.name }} - {{ item.price }}元 <button @click="addToCart(item)">加入购物车</button> </li> </ul> <h2>购物车</h2> <table> <thead> <tr> <th>名称</th> <th>单价</th> <th>数量</th> <th>小计</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(item, index) in cart"> <td>{{ item.name }}</td> <td>{{ item.price }}元</td> <td> <input type="number" v-model="item.quantity" min="1"> </td> <td>{{ item.price * item.quantity }}元</td> <td> <button @click="removeFromCart(index)">删除</button> </td> </tr> </tbody> </table> <p>总价:{{ totalPrice }}元</p> </div> ``` JavaScript: ``` new Vue({ el: '#app', data: { goods: [ { name: '商品1', price: 10, quantity: 1 }, { name: '商品2', price: 20, quantity: 1 }, { name: '商品3', price: 30, quantity: 1 } ], cart: [] }, methods: { addToCart(item) { let index = this.cart.findIndex(cartItem => cartItem.name === item.name) if (index !== -1) { this.cart[index].quantity++ } else { this.cart.push({ name: item.name, price: item.price, quantity: 1 }) } }, removeFromCart(index) { this.cart.splice(index, 1) } }, computed: { totalPrice() { return this.cart.reduce((total, item) => total + item.price * item.quantity, 0) } } }) ``` 在这个示例中,首先定义了一个商品列表和一个购物车列表,其中商品列表包含了每个商品的名称、价格和数量,购物车列表为空。在页面上展示商品列表时,为每个商品添加了一个加入购物车的按钮,并在点击按钮时调用 `addToCart` 方法将对应商品信息加入购物车列表中。在页面上展示购物车列表时,使用了一个表格来展示每个商品的名称、价格、数量和小计金额,并为每个商品添加了一个删除按钮,同时使用了一个计算属性来计算购物车中所有商品的总价。最后,在 `addToCart` 方法中还实现了判断购物车中是否已存在该商品的逻辑,如果存在则将对应商品的数量加 1,否则将该商品添加到购物车列表中。在 `removeFromCart` 方法中通过 `splice` 方法实现了删除购物车列表中的商品的逻辑。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端卡卡西呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值