vue的项目一开始最好用的就是绑定input上面的v-model，随着项目的深入，学习也是一直在深入，项目完成了，就闲来无事，做了一个vue项目的购物车实现效果，效果很简单，但是一开始做的时候还是进入了不少的坑，针对网络上各种购物车效果实现的原理，今天我也把项目中用的购物车经验分享一下。

  • 安装vue项目 vue init webpack myProject
  • 运行项目（这里要主要一下：项目的版本不断的升级，所以可能今天你的运行方式是这样，以后升级之后项目的运行方式就变了） 我这里的运行方式是 npm start
    接下来就是项目的实现方式了。
    这是我得项目结构
    我的数据结构是这样的：
const data = [
        {id:"3232423432452342s",name: "红色手账本", price :31,quantity:1},
        {id:"45565612fsdfsdfds",name: "苹果笔记本", price :10236,quantity:1},
        {id:"dfsdfgdsfgsdf6536",name: "华为手机", price :12023,quantity:1},
        {id:"fdsfsdfsfds696939",name: "苹果8P", price :1220,quantity:1},
        {id:"56f565656f5ds6f5s",name: "iphone 6s", price :8962,quantity:1},
        {id:"4d55656f5s6df5sd6",name: "English Book", price :300,quantity:1},
        {id:"ffdterv4541214554",name: "无人生还强烈推荐", price :1002,quantity:1},
        {id:"4fdsfv12xcv45sdgh",name: "中国最好的书", price :156,quantity:1},
]

以上是我的项目结构，主要使用到的就是红色框框起来的部分。
基本思路：

  1. 在Car.vue中创建出自己的模板文件
  2. 实现inpu输入框中的数字改变效果
  3. 实现单个产品总价的计算
  4. 实现单个产品的选中取消
  5. 实现在底部的结算中商品数量和价格的计算
  6. 实现全部的产品选中取消
  • [1 ]Car.vue 文件的实现样式展示
<template>
  <div class="container">
    <h1 class= "title">{{ msg }}</h1>
    <ul class="list">
       <li class="item-li" v-for="(item,index) in listData" :key="item.id">
          <div class="item">
            <div class="item-check" ></div>
             <div class="item-image">
               <img src="/static/images/88.jpg" alt="item.name">
             </div>
             <div class="item-content">
               <p>{{item.name}}</p>
               <p>&yen;{{item.price}}</p>
               <p>总价：&yen;{{item.price * item.quantity}}</p>
             </div>
             <div class="item-quantity">
               <span >-</span>
               <input type="number" class="item-input" v-model="item.quantity" value="item.quantity">
               <span >+</span>
             </div>
          </div>
       </li>
    </ul>
    <div class="list-bottom"> 
      <div class="list-bottom-left">
        <div class="item-check" :class = "{'check-true': totalChecked}" ></div>
        <label for="all">全选</label>
      </div>
       <div class="list-bottom-right">
         <div>结算：&yen;42454(56件)</div>
      </div>
    </div>
  </div>
</template>

样式结构

<style scoped>
    .container{width:100%; height:100%;}
    .title{font-size:16px;padding:10px;border-bottom : 1px solid #ddd;}
    .list{margin: 10px;box-sizing: border-box;}
    .item-li{margin: 10px 0;padding: 10px;background: #fff;box-shadow: 1px 0 5px rgba(0,0,0,.2)}
    .item{display: flex;align-items: center;justify-content: space-between;}
    .item-check{width: 20px;height: 20px;border:1px solid #333}
    .check-true {background: crimson}
    .item-image{width: 120px;height: 120px;padding: 10px;}
    .item-image img{width: 100%}
    .item-content{flex: 1}
    .item-quantity{background: cornflowerblue;height: 30px;display: flex;}
    .item-quantity span{display: inline-block;width: 30px;background: #ddd;font-size: 20px;text-align: center}
    .item-input{width: 50px;height: 100%;padding:0 5px;vertical-align: middle;display: inline-block;color: #fff;border:none;background: none;outline: none;}
    .list-bottom{position:fixed;bottom:0;height: 50px;width: 100%;display: flex;background: cornsilk;align-items: center;justify-content: space-between;}
    .list-bottom-left{padding:0 10px;display: flex;align-items: center;}
    .list-bottom-right{padding:0 10px;display: flex;align-items: center;background: darkorange;height: 50px;}
    .list-bottom-check{margin:10px;}
</style>
  • [2 ]实现inpu输入框中的数字改变效果，此时要将数据引入
    这里要用到的vue的绑定 v-bind 和 v-model
    在 class=“item-quantity” 这个块中实现效果，创建方法：changeQuantity
 	    	 <div class="item-quantity">
	               <span @click="changeQuantity(index,-1)">-</span>
	               <input type="number" class="item-input" v-model="item.quantity" value="item.quantity">
	               <span @click="changeQuantity(index,1)">+</span>
             </div>

  changeQuantity (index,plus){
        var quantity = this.listData[index].quantity;
        var sum = quantity + plus;
        if(sum <= 1 ){
          sum = 1;
        }
        this.listData[index].quantity = sum;
        this.$set(this.listData,index,this.listData[index])
    },

这个方法可以实现数量的加减，是不是比网络上说的那些方法简单，反正我自己是觉得代码简单很容易理解。因为我之前没有做购物车的时候找了N多种方法，最后也没有找到合适的，最后一定要改变值才行

  • [3 ]实现单个产品总价的计算
    数量已经能改变了，是不是单个商品的总价也能改变了，这个时候展现vue魅力的时候
 <p>总价：&yen;{{item.price * item.quantity}}</p>
  • [4 ]实现单个产品的选中取消
    若是商品被选中则选中框变色，否则是不变色的，主要是取值每一个对象里面的checked 是不是为真
    显示代码是这样的：
  <div class="item-check" @click="selectItem(index)" :class = "{'check-true': item.checked}"></div>

js

  selectItem (index) {
       var checked = true ;
       var item = this.listData[index];
       if(item.checked != undefined){
         checked = !item.checked
       }
       item.checked = checked;
       var bolem = this.listData.every(function (item) { return item.checked});
       if(bolem){
        this.totalChecked = bolem;
       }
       this.$set(this.listData,index,this.listData[index]);
    },

下面的这句话是为了检查所有你的商品是不是已经选中，若是选中了就将全部的选中按钮点亮

var bolem = this.listData.every(function (item) { return item.checked});
if(bolem){
this.totalChecked = bolem;
}

页面中 显示是这样的：

   <div class="item-check" :class = "{'check-true': totalChecked}" @click="listSelect"></div>
  • [5 ]实现在底部的结算中商品数量和价格的计算，这里使用watch
  watch:{
    listData : {
      handler : function (obj) {
         let totalPrice  = 0;
         let totalQuantity = 0;
         for(var i = 0 ;i < obj.length ; i++){
            if(obj[i].checked){
              totalQuantity += obj[i].quantity;
              totalPrice +=  obj[i].quantity * obj[i].price
            }
         }
         this.totalQuantity = totalQuantity;
         this.totalPrice = totalPrice;
      },
      deep : true
    }
  },

此时可以将 totalQuantity 和totalPrice 写入页面中的位置：

  <div class="list-bottom"> 
      <div class="list-bottom-left">
        <div class="item-check" :class = "{'check-true': totalChecked}" @click="listSelect"></div>
        <label for="all">全选</label>
      </div>
       <div class="list-bottom-right">
         <div>结算：&yen;{{totalPrice}}({{totalQuantity}}件)</div>
      </div>
    </div>
  • [6] 实现全部的产品选中取消
    主要的思路就是改变checked的值
  listSelect () {
      var checked  = !this.totalChecked;
      for(var i = 0 ;i < this.listData.length ; i++){
         this.listData[i].checked = checked;
         this.$set(this.listData,i,this.listData[i])
      }
      this.totalChecked = checked;
    }

完整的购物车思路完成了，想要更全的代码段的可以去我得资源下载vue-cli是实现购物车的效果 https://download.csdn.net/download/qq_30405009/10861509
这个项目自己查看源码，以前看别人的技术文档现在想自己写，还真不是那么容易的，觉得好的记得给个赞呢！

# 前端
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue