使用Vue.js编写购物车组件(附常见错误解析、运行结果动图以及源码)

前两天老师让编写一个购物车组件,经过一段时间的努力,我的购物车终于完成了。借着这个例子,来分享按照组件方式实现业务需求的过程以及所学到的知识点。

一、按照组件方式实现业务需求的过程

1、明确需求:尝试完成一个购物车组件的编写

要求:

  • 购物车中可以显示多种产品的名称、数量和价格
  • 显示每种商品的小计(小计=单价*数量)
  • 商品数量可以输入,或者用加减按钮进行变更,商品小计随数量变更而变更
  • 在购物车尾部显示商品的总价
  • 实现每种商品的删除操作,商品总价随之跟着改变

2、根据业务功能进行组件化划分:

  • 标题组件(展示文本)
  • 列表组件(列表展示、商品数量变更、商品删除)
  • 结算组件(计算商品总额)

3、功能实现步骤:

  • 实现整体布局和样式效果
  • 划分独立的功能组件
  • 组合所有的子组件形成整体结构
  • 逐个实现各个组件功能(标题组件、列表组件、结算组件)

4、详细实现过程:
这是老师给的样板,我贴出来大家感受一下:

<table>
         <thead>
            <tr>
                <th v-for="col in columns">{
  {col.title}}</th>
            </tr>
         </thead>

         <tbody>
            <tr v-for="(item,index) in list">
                <td v-for="col in columns">{
  {item[col.field]}}</td
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值