VUE3经典项目，购物车功能的简单实现

在购物车项目中有着许多的基础知识点，这些功能的逻辑梳理对我们复习遗忘的知识起着很好的效果。

这是购物车的一个基本框架，基本功能

diff

复制代码
-   渲染的时候注意购物车整体和空车不能同时出现
-   修改个数时需要先通过id找到对应项，才能进行加加减减
-   修改个数时要注意，当数量为1时要禁用减号
-   全选反选：

我们主要通过使用基本的Vue指令和computed计算属性来控制整个页面的计算和结构

先给出HTML主体结构，页面的中的商品个数和购物车是否是空通过V-for和V-if来渲染的，其他结构相对固定

xml

复制代码
<div class="main">
<h1>水果购物车</h1>
  <div class="tab">
      <div class="item">选中</div>
      <div class="item">图片</div>
      <div class="item">单价</div>
      <div class="item">个数</div>
      <div class="item">小计</div>
      <div class="item">操作</div>
  </div>
  <!-- 加入购物车的商品 -->
<div class="tbody">
  <ul>
    <li v-for="(item, index) in list">
      <!-- 选中框 -->
      <input type="checkbox" v-model="item.isTrue">
      <!-- 图片，无其他操作 -->
      <div><img :src="item.url" alt=""></div>
      <!-- 单价 -->
      <div class="price">{{item.price}}</div>
      <!-- 数量 -->
      <div class="sum">
        <button class="increase" @click="red(index)">-</button>
        <textarea name="" id="" v-model="item.sum">{{item.sum}}</textarea>
        <button class="decrease" @click="add(index)">+</button>
      </div>
      <!-- 小计多少 -->
      <div class="littleSum" >{{item.price*item.sum}}</div>
      <!-- 删除操作 -->
      <div class="operation" @click="del(index)"><button>删除</button></div>
    </li>
  </ul>
</div>
  <div class="empty" v-if="!list.length">购物车里空空如也</div>
  <div class="unempty" v-else>
    <p>全选</p>
    <input type="checkbox" @click="isAll()">
    总价格:  {{totalCount}} 
      </div>
  </div>
//在HTML页面引用vue3在线链接  
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

JS部分

javascript

复制代码
   const app=new Vue({
  el:".main",
  data:{
    list:[
      {id: 1 ,name:"草莓",isTrue:true,price:15,sum:1,url:"./草莓.webp"},
      {id: 1 ,name:"草莓",isTrue:false,price:15,sum:2,url:"./草莓.webp"},
      {id: 1 ,name:"草莓",isTrue:false,price:15,sum:1,url:"./草莓.webp"},
      {id: 1 ,name:"草莓",isTrue:false,price:15,sum:1,url:"./草莓.webp"},
      {id: 1 ,name:"草莓",isTrue:false,price:15,sum:1,url:"./草莓.webp"}
    ],
    sumPrice:11
  },
  methods:{
  //加数量
    add(index){
        this.list[index].sum++
    },
  //减数量
    red(index){
      if(this.list[index].sum>0)
        this.list[index].sum--
    },
    删除元素
    del(index){
      this.list.splice(index,1)
    },
    isAll(){
      //判断是否全选，如果全选则反选，为全选，则全选
     if(this.list.every(element => element.isTrue===true)){
            this.list.forEach(element => {element.isTrue=false})
        }
     else{
            this.list.forEach(element => {element.isTrue=true})
     }
    }
  },
  computed:{
  使用computed属性可以减少算力的消耗
    totalCount(){
      return this.list.reduce((Sum,item)=>{
        if(item.isTrue)
          return Sum+=item.price*item.sum
        else
          return Sum
      },0)
    }
  }
})

欢迎点赞交流

源文：VUE3经典项目，购物车功能的简单实现

如有侵权请联系站点删除！