Vue.js实现的购物车功能详解-创新互联

本文实例讲述了Vue.js实现的购物车功能。分享给大家供大家参考，具体如下：

创新互联公司主要从事成都网站建设、网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务周宁,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

使用计算属性，内置指令，方法等基础知识开发购物车。

需求分析：展示一个已经加入购物车的商品列表，包含商品名称、商品单价、购买数量和操作，以及最后确定是否选中商品的功能，总价格为选中商品的价格，够买数量可以增加减少，商品可以从购物车中移除。效果如图所示：

——实例来自《Vue.js实战》第五章

逻辑整理：vue实例定义一个数组list存放商品信息，定义方法与减少按钮，增加按钮等联系，动态改变商品数量，通过handleRemove()移除list中的值；利用each()遍历所有type='checkbox'的input，修改它们的状态，最后用totalPrices()计算商品总价格。

index.html

<div id="app">
    <template v-if="list.length">
      <table>
        <thead>
          <tr>
            <th></th>
            <th>商品名称</th>
            <th>商品单价</th>
            <th>购买数量</th>
            <th>操作</th>
            <th><input type="checkbox" name="list" @click="checkBox()" id="checkBox"></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in list">
            <td>{{ index + 1 }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.price }}</td>
            <td>
                <button
                  @click="handleReduce(index)"
                  :disabled="item.count === 1" class="btn"> - </button>
                {{ item.count }}
                <button @click="handleAdd(index)" class="btn"> + </button>
            </td>
            <td>
                <button @click="handleRemove(index)" class="btns">移除</button>
            </td>
            <td >
                <input type="checkbox" name="list" @click="totalPrices()">
            </td>
          </tr>
        </tbody>
      </table>
      <div id="price">总价：￥{{totalPrice}}</div>
    </template>
    <div v-else>购物车为空</div>
</div>

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网站标题：Vue.js实现的购物车功能详解-创新互联
分享地址：https://www.cdcxhl.com/article0/poiio.html

成都网站建设公司_创新互联，为您提供用户体验、网页设计公司、搜索引擎优化、营销型网站建设、网站制作、网站设计公司

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联