学习记录-vue2，3-购物车案例

原创

于 2025-03-23 23:19:31 发布 · 457 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #vue.js #前端

购物车案例功能描述

通过初始数据对购物车页面进行渲染
点击购物车的加减按钮可以增加和减少购买数量，同时刷新小计数量
点击购物车列表最右侧删除按钮可以将商品删除，同时右下角结算数量相应改变
单击购物车下方全选按钮，商品全选，并将总价动态计算出来
当购物车无商品时，底部出现

购物车案例实现步骤

1. 概念理解

了解computed计算属性
computed与data，methods同级，专门用于存放实时变化的数据。数据名(){数据处理；return 处理结果}

了解vue基础指令

代码	含义
v-model	绑定表单数据，当v-model后的数据名称与data定义的数据名称一致时，就会双向绑定
v-show	后跟判断语句，当为假时，给予该元素display：none属性
v-if,v-else,v-else if	通常同时出现，后跟条件判断语句，当为假时，直接删除该元素

Html框架

		<div class="app-container" id="app">
    <!-- 顶部banner -->
    <div class="banner-box"><img src="./img/fruit.jpg" alt="" /></div>
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <span>🏠</span>
      /
      <span>购物车</span>
    </div>
    <!-- 购物车主体 -->
    <div class="main">
      <div class="table">
        <!-- 头部 -->
        <div class="thead">
          <div class="tr">
            <div class="th">选中</div>
            <div class="th th-pic">图片</div>
            <div class="th">单价</div>
            <div class="th num-th">个数</div>
            <div class="th">小计</div>
            <div class="th">操作</div>
          </div>
        </div>
        <!-- 身体 -->
        <div class="tbody">
          <div class="tr active" v-for="(item,index) in fruitList" :key="item.id">
            <div class="td"><input type="checkbox" v-model="item.isChecked" /></div>
            <div class="td"><img :src="item.icon" alt="" /></div>
            <div class="td">{
   
   {
   
   item.price}}</div>
            <div class="td">
              <div class="my-input-number">
                <button class="decrease" @click="item.num<=1?item.num=1:item.num--"> - </button>
                <span class="my-input__inner">{
   
   {
   
   item.num}}</span>
                <button class="increase" @click="item.num++"> + </button>
              </div>
            </div>
            <div class="td">{
   
   {
   
   item.num*item.price}}</div>
            <div class="td"><button @click="del(item.id)"