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

最新推荐文章于 2024-07-06 18:15:35 发布

hepei_i

最新推荐文章于 2024-07-06 18:15:35 发布

阅读量4k

点赞数 6

分类专栏： Vue 文章标签： Vue案例移动端购物车 JavaScript

本文链接：https://blog.csdn.net/qq_41787619/article/details/95986992

版权

本文通过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