vue实现简单的移动端购物车案例

本文通过Vue展示了如何创建一个移动端购物车应用,包括商品展示、数量增减、选择商品和总价计算等功能。实现步骤包括准备Vue.js文件、页面布局与样式设计、以及模拟和操作数据。
摘要由CSDN通过智能技术生成

通过vue实现一个简单的移动端购物车案例,包括显示商品基本信息,添加商品数量,选择及全选商品,进行计算价钱、购买或删除等操作。效果及演示如下图

 实现步骤

一、首先将需要用到的vue.js文件准备,或直接使用cdn地址

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

二、然后对页面整体进行布局和样式完善,主要包括头部、列表项和尾部确认提交

<body>
        <div id="app">
            <p>购物车</p>
            <p>共{
  {shoppingList.length}}件宝贝</p>
            <div class="shoppingMain">
                <div class="shoppingItem" v-for="(item,index) in shoppingList"><!--列表项-->
                    <div class="selectCircle" :class="{checked:item.isSelect}" @click="selectGoods(item)"></div>
                    <div class="shoppingImg">
                        <img :src="item.imgurl" alt="">
                    </div>
                    <div class="itemRight">
                        <p class="title">{
  {item.title}}</p>
                        <p>{
  {item.color}}</p>
                        <div class="numAndMoney">
                            <p>¥{
  {item.money}}</p>
                            <div class="numberControl">
                                <a class="btn" @click="numDel(item,index)">-</a>
                                <input type="text" v-model="item.num" readonly="readonly">
                                <a class="btn" @click="numAdd(item,index)">+</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottomMain">                <!--底部固定栏-->
                <div class="selectCircle" :class="{checked:allSelect}" @click="allGoodsSelect"></div>
                <span style="padding: 10px">全选</span>
                <button class="bottombtn2" @click="delGoods">删除</button>  
                <button class="bottombtn1" @click="buyGoods">¥{
  {sum}}&nbsp;结算</button>                
            </div>
        </div>
    </body>
   /* 样式设置 */
            body{
                margin: 0;
                padding: 0;
                background: #e0dada;
            }
            button{
                outline: none;
                border-color: transparent;
                box-shadow:none;
            }
            #app{
                margin: 0;
                padding: 0;
                width: 100%;
               
            }
            .shoppingMain{
                width: 100%;
                height: auto;
                margin-bottom: 70px;
            }
            .shoppingItem{
                width: 96%;
                margin-left: 2%;
                margin-bottom: 10px;
                background: #fff;
                border-radius:5px;
                display: flex;
            }
            .selectCircle{
                width: 15px;
                height: 15px;
                border: 1px solid #a7a5a5;
                border-radius: 50%;
                margin: auto 0px auto 10px;
            }
            .shoppingImg{
                width: 100px;
                height: 100px;
                padding: 10px;
            }
            .shoppingImg img{
                height: 100%;
                width: 100%;
            }
            .itemRight{
                font-size: 10px;
                width: 200px;
            }
            .title{
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: h
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值