vue实现简单的购物车小案例

本文实例为大家分享了vue实现简单购物车的具体代码，供大家参考，具体内容如下
最近在写vue的相关项目，所以找一些小例子练习一下，把一个js的购物车改成vue了
css部分是直接引入的插件
效果图如下

1. <template>
2. <div class="head">
3.   <meta charset="UTF-8">
4.   <title>我的购物车-品优购</title>
5.   <meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
6.   <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" />
7. <!--  <!– 引入facicon.ico网页图标 –>-->
8. <!--  <link rel="shortcut icon" href="favicon.ico" rel="external nofollow"  type="image/x-icon" />-->
9.   <!-- 引入css 初始化的css 文件 -->
10.   <link rel="stylesheet" href="src/assets/carStyle/base.css" rel="external nofollow" >
11.   <!-- 引入公共样式的css 文件 -->
12.   <link rel="stylesheet" href="src/assets/carStyle/common.css" rel="external nofollow" >
13.   <!-- 引入car css -->
14.   <link rel="stylesheet" hef="src/assets/carStyle/car.css" rel="external nofollow" >
15. </div>
16. <div class="body">
17.   <div class="car-header">
18.    <div class="w">
19.     <div class="car-logo">
20.      <img src="src/assets/images/logo.png" alt=""> <b>购物车</b>
21.     </div>
22.    </div>
23.   </div>
24.   <div class="c-container">
25.    <div class="w">
26.     <div class="cart-filter-bar">
27.      <em>全部商品</em>
28.     </div>
29.     <!-- 购物车主要核心区域 -->
30.     <div class="cart-warp">
31.      <!-- 头部全选模块 -->
32.      <div class="cart-thead">
33.       <div class="t-checkbox">
34.        <input type="checkbox" name="" id="" class="checkall"> 全选
35.       </div>
36.       <div class="t-goods">商品</div>
37.       <div class="t-price">单价</div>
38.       <div class="t-num">数量</div>
39.       <div class="t-sum">小计</div>
40.       <div class="t-action">操作</div>
41.      </div>
42.      <!-- 商品详细模块 -->
43.      <div class="cart-item-list" v-for="(good,index) in cartList">
45.       <div class="cart-item">
46.        <div class="p-checkbox">
47.         <input type="checkbox" v-model="good.isSelected" @click="oneSelected(index)">
48.        </div>
49.        <div class="p-goods">
50.         <div class="p-img">
51.          <img v-bind:src=good.imgUrl alt="">
52.         </div>
53.         <div class="p-msg">{{good.message}}</div>
54.        </div>
55.        <div class="p-price">{{good.PriceItem}}</div>
56.        <div class="p-num">
57.         <div class="quantity-form">
58.          <el-button class="increment" @click="changeDe(index)">-</el-button>
59.          <input type="text" class="itxt" v-model=good.ItemNum placeholder="1">
60.          <el-button class="increment" @click="changeIn(index)">+</el-button>
61.         </div>
62.        </div>
63.        <div class="p-sum">{{good.PriceSum}}</div>
64.        <div class="p-action">
65.         <el-button type="danger" @click="DeleteItem(id)">删除</el-button>
66.        </div>
67.       </div>
68.      </div>
70.      <!-- 结算模块 -->
71.      <div class="cart-floatbar">
72.       <div class="select-all">
73.        <input type="checkbox" @click="allCheck" v-model="allSelected">全选
74.       </div>
75.       <div class="operation">
76.        <a class="remove-batch" @click="DeleteSelected"> 删除选中的商品</a>
77.        <a class="clear-all" @click="DeleteAll">清理购物车</a>
78.       </div>
79.       <div class="toolbar-right">
80.        <div class="amount-sum">已经选<em>{{NumSum}}</em>件商品</div>
81.        <div class="price-sum">总价： <em>{{totalPrice}}</em></div>
82.        <div class="btn-area">去结算</div>
83.       </div>
84.      </div>
85.     </div>
86.    </div>
88.   </div>
89. </div>
90. </template>
92. <script>
93. import { defineComponent } from 'vue'
94. export default defineComponent({
95. data(){
96.   return{
97.    allSelected:false,
98.    cartList:[
99.     {
100.      imgUrl:'src/assets/upload/p1.jpg',
101.      message:'【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲',
102.      PriceItem: 12.6,
103.      PriceSum: 12.6,
104.      ItemNum: 1,
105.      isSelected:false
106.     },
107.     {
108.      imgUrl:'src/assets/upload/p2.jpg',
109.      message:'【2000张贴纸】贴纸书 3-6岁 贴画儿童 贴画书全套12册 贴画 贴纸儿童 汽',
110.      PriceItem: 24.8,
111.      PriceSum: 24.8,
112.      ItemNum: 1,
113.      isSelected:false
114.     },
115.     {
116.      imgUrl:'src/assets/upload/p3.jpg',
117.      message:'唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版 小学生二三年级课外阅读书籍',
118.      PriceItem: 29.8,
119.      PriceSum: 29.8,
120.      ItemNum: 1,
121.      isSelected:false
122.     },
123.    ]
124.   }
125. },
126. methods:{
127.   changeIn(id){
128.    let n=this.cartList[id].ItemNum;
129.    // console.log(n);
130.    this.cartList[id].ItemNum++;
131.    this.cartList[id].PriceSum = this.cartList[id].ItemNum * this.cartList[id].PriceItem;
132.   },
133.   changeDe(id){
134.    if(this.cartList[id].ItemNum === 0)alert("该商品已经清0！");
135.    else {
136.     this.cartList[id].ItemNum--;
137.     this.cartList[id].PriceSum = this.cartList[id].ItemNum * this.cartList[id].PriceItem;
138.    }
139.   },
140.   DeleteItem(id){
141.    // console.log(this.$parent);
142.    // console.log(this.$children);
143.    this.cartList.splice(id,1);
144.   },
145.   allCheck(){
146.    // console.log(this.allSelected);
147.   this.cartList.forEach((item)=>{
148.    // console.log(this.allSelected);
149.    // console.log(this.cartList);
150.    item.isSelected=!this.allSelected;
151.   })
152.   },
153.   DeleteSelected(){
154.    for(let i=0;i<this.cartList.length;i++){
155.     if(this.cartList[i].isSelected===true){
156.      this.cartList.splice(i,1);
157.     }
158.    }
159.   },
160.   DeleteAll(){
161.    this.cartList.splice(0,this.cartList.length);
162.   },
163.   oneSelected(id){
164.    if(this.cartList[id].isSelected===false)
165.     this.cartList[id].isSelected=true;
166.    else
167.     this.cartList[id].isSelected=false;
169.    let n=0;
170.    for(let i=0;i<this.cartList.length;i++){
171.     if(this.cartList[i].isSelected===true)
172.      n++;
173.    }
174.    if(n===this.cartList.length)this.allSelected=true;
175.    else this.allSelected=false;
176.   }
177. },
178. computed:{
179.   NumSum() {
180.    let num=0;
181.    this.cartList.forEach((item)=>{
182.     if(item.isSelected===true)
183.     num++;
184.    })
185.    return num;
186.   },
187.   totalPrice() {
188.    let totalp=0;
189.    this.cartList.forEach((item)=>{
190.     if(item.isSelected===true)
191.      totalp += item.PriceSum;
192.    })
193.    return totalp;
194.   },
195. }
196. })
198. </script>
199. <style lang="scss" scoped>
201. </style>

复制代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中国红客联盟。