Vue 实战购物车

Vue 渐进式JavaScript 框架 基于Vue3的学习笔记 - Vue 实战购物车

目录

实战购物车

引入vue

购物车开发

样式设置

设置数据及实例化

初步渲染页面

设置复选框

变量设置

增加复选框

设置复选框值

总金额

增加总金额

总金额计算方法

加数量

限购

减数量

删除

增加删除按钮

绑定删除事件

删除事件

全选/全不选

设置一个布尔值

增加全选/全不选

绑定事件

设置事件

每项改变事件

删除修改

总结

---

实战购物车

通过之前所学知识，综合应用实现一个Vue3版本的购物车应用。

实现过程如下：

引入vue

这次引入使用vue 3版本。

示例如下：

<script src="../lib/vue.next.js"></script>

购物车开发

样式设置

在头部标签中的style标签中，设置要使用的类样式。

示例如下：

<style>
  li {
    display:flex;
    justify-content: space-around;
    padding: 10px;
  }
  li img {
    width:100px;
  }
</style>

设置数据及实例化

实际业务会从后端接口或者动态添加进来的；目前还未学习，先做一个假数据。

Vue3的实例化与vue2不同。

示例如下：

<script>
  let obj = {
    data() {
      return {
        datalist: [{
          id:1,
          name:"商品1",
          price: 10,
          number:1,
          limit:5, //限购
          pic: "http://localhost:63342/WWW/images/1.jpg"
        },
          {
            id:2,
            name:"商品2",
            price: 20,
            number:2,
            limit:6, //限购
            pic: "http://localhost:63342/WWW/images/2.jpg"
          },
          {
            id:3,
            name:"商品3",
            price: 30,
            number:3,
            limit:7, //限购
            pic: "http://localhost:63342/WWW/images/3.jpg"
          },
          {
            id:4,
            name:"商品4",
            price: 40,
            number:4,
            limit:8, //限购
            pic: "http://localhost:63342/WWW/images/4.jpg"
          }
        ]
      }
    }
  }

  Vue.createApp(obj).mount("#box");
</script>

初步渲染页面

创建页面及初步渲染列表。

示例如下：

<div id="box">
  <ul>
    <li v-for="item in datalist" :key="item.id">
      <img :src="item.pic" alt="">
      <div>
        <div>{{item.name}}</div>
        <div style="color:blue">￥{{item.price}}</div>
      </div>
      <div>
        <button>-</button>
        <button>+</button>
      </div>
    </li>
  </ul>
</div>

设置复选框

变量设置

在变量中设置复选框选项值存储变量。

示例如下：

let obj = {
  data() {
    return {
      checkList: [], // 勾选购物车的数据

增加复选框

每一列增加设置复选框。

示例如下：

<li v-for="item in datalist" :key="item.id">
  <input type="checkbox" v-model="checkList">
  <img :src="item.pic" alt="">

设置复选框值

复选框的值直接绑定item对象。

示例如下：

<input type="checkbox" v-model="checkList" :value="item">

总金额

增加总金额

购物车增加总金额显示。

示例如下：

<div id="box">
  <ul>
    <li v-for="item in datalist" :key="item.id">
      <input type="checkbox" v-model="checkList" :value="item">
      <img :src="item.pic" alt="">
      <div>
        <div>{{item.name}}</div>
        <div style="color:blue">￥{{item.price}}</div>
      </div>
      <div>
        <button>-</button>
        <button>+</button>
      </div>
    </li>
  </ul>
  <div>总金额：{{sum()}}</div>
</div>

总金额计算方法

在方法中增加总金额计算方法。

在原来的data()函数式下增加methods。

示例如下：

methods : {
  sum() {
    let total = 0
    // 累加计算 checkList 数组中的每一项的 价格*数量
    this.checkList.forEach(item => {
      total += item.price * item.number
    })

    return total
  }
}

效果：

加数量

开始开发购物车加数量功能并增加显示当前购物车商品数量。

示例如下：

<div>
  <button>-</button>
  <span>{{item.number}}</span>
  <button @click="item.number++">+</button>
</div>

限购

在加数量时需要判断购物车该商品限购数量。

当购物车该商品数量等于限购数量时，按钮置灰。

示例如下：

<button @click="item.number++" :disabled="item.number === item.limit">+</button>

减数量

购物车减商品数量开发，需要注意商品数量不能少于1.

示例如下：

<button @click="item.number--" :disabled="item.number === 1">-</button>

注意：加减数量实现原理为Vue的深度拦截。

删除

购物车删除商品功能实现。

增加删除按钮

在增加减少商品数量按钮后，增加删除按钮。

示例如下：

<li v-for="(item, index) in datalist" :key="item.id">
  <input type="checkbox" v-model="checkList" :value="item">
  <img :src="item.pic" alt="">
  <div>
    <div>{{item.name}}</div>
    <div style="color:blue">￥{{item.price}}</div>
  </div>
  <div>
    <button @click="item.number--" :disabled="item.number === 1">-</button>
    <span>{{item.number}}</span>
    <button @click="item.number++" :disabled="item.number === item.limit">+</button>
  </div>
  <div>
    <button>删除</button>
  </div>
</li>

绑定删除事件

绑定事件时，需要传递要删除商品唯一属性。

示例如下：

<button @click="handleDelGoods(index, item.id)">删除</button>

删除事件

设置删除事件处理；需要两种处理，一个是选中的商品，另一个是购物车存在的商品。

示例如下：

handleDelGoods(index, id) {
  // 删除的是datalist-根据 index
  this.datalist.splice(index, 1)

  // 删除checklist-根据id
  this.checkList = this.checkList.filter(item=>item.id !== id)
}

全选/全不选

设置一个布尔值

示例如下：

let obj = {
  data() {
    return {
      checkList: [], // 勾选购物车的数据
      isAll : false,

增加全选/全不选

在购物车列表上增加全选/全不选按钮并绑定布尔值变量。

示例如下：

<div id="box">
  <input type="checkbox" v-model="isAll"> 全选/全不选

绑定事件

增加改变事件触发，点击事件会导致还没有同步值就触发事件。

示例如下：

<input type="checkbox" v-model="isAll" @change="allGoods"> 全选/全不选

设置事件

设置购物车全选/全不选事件处理。

示例如下：

allGoods() {
  if (this.isAll) {
    this.checkList = this.datalist
  } else {
    this.checkList = []
  }
}

每项改变事件

当每一列改变时，触发每项改变事件；

主要处理单独全选或者全不选时没有同步全选/全不选按钮状态。

示例如下：

<li v-for="(item, index) in datalist" :key="item.id">
  <input type="checkbox" v-model="checkList" :value="item" @change="itemGoods">

.......

itemGoods() {
  if (this.checkList.length === this.datalist.length) {
    this.isAll = true
  } else {
    this.isAll = false
  }
}

删除修改

删除时直接手动同步状态。

示例如下：

handleDelGoods(index, id) {
  // 删除的是datalist-根据 index
  this.datalist.splice(index, 1)

  // 删除checklist-根据id
  this.checkList = this.checkList.filter(item=>item.id !== id)

  // 同步一下状态
  this.itemGoods()
}

最终效果：

 

总结

Vue 渐进式JavaScript 框架 基于Vue3的学习笔记 - Vue 实战购物车