vue实现购物车功能

最新推荐文章于 2024-07-16 16:33:57 发布

蓦然回首何处是

最新推荐文章于 2024-07-16 16:33:57 发布

阅读量224

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/pure_one/article/details/119204297

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这是一个使用Vue.js编写的购物清单应用示例。页面包含一个全选按钮，可以选中或取消选中所有商品。每个商品有独立的选择框、图片、详细信息、单价、数量编辑（增减）和删除功能。总价和购买件数会根据商品的选中状态和数量实时计算。用户可以删除选中商品或全部商品，底部显示总价和结算按钮。

摘要由CSDN通过智能技术生成

html 部分

<div id="app">
   <!-- vue模块 -->
   <h3>购物清单</h3>
   <table border="0" cellspacing="0" cellpadding="0">
      <tr style="background-color: #EEEEEE;">
         <td style="width: 80px;height: 30px;">
            <input type="checkbox" @click="qaunfun()" v-model="quan">全选</td>
         <td style="width: 460px;height: 30px;padding-left: 10px;" colspan="2">商品信息</td>
         <td style="width: 100px;height: 30px;">单价</td>
         <td style="width: 100px;height: 30px;">数量</td>
         <td style="width: 100px;height: 30px;">金额</td>
         <td style="width: 100px;height: 30px;">操作</td>
      </tr>
      <tr v-for="(item,index) in arr">
         <td><input type="checkbox" v-model="item.checked"></td>
         <td><img :src="item.imgurl"></td>
         <td v-html="item.msg" style="text-align: left;"></td>
         <td>{{item.price}}</td>
         <td>
            <div style="border: 1px solid black;width: 60px;height: 20px;">
               <span @click="if(--item.count==0) item.count=1">-</span>
               {{item.count}}
               <span @click="item.count++">+</span></td>
            </div>
         <td>{{item.count*item.price}}</td>
         <td><p @click="delline(index)">删除</p></td>
      </tr>
      <tr style="background-color: #EEEEEE;">
         <td style="height: 30px;"><button type="button" @click="delxuan()">删除选中</button></td>
         <td colspan="6" style="height: 30px;text-align: right;">
            {{jijian}}件商品(不含运费)：{{total}}元 去结算
         </td>
      </tr>
   </table>
</div>

js 部分

var app = new Vue({
   el: "#app", //设置挂载点
   computed:{
      //总价
      total(){
         var sum=0;
         this.arr.map((item)=>{
            if(item.checked){
               sum+=item.count*item.price
            }
         })
         return sum
      },
      //购买的件数
      jijian(){
         var arrnew=[]
         this.arr.map((item)=>{
            if(item.checked){
               arrnew.push(item)
            }
         })
         return arrnew.length
      }
   },
   data: {
      arr:[
         {msg:"<b>【汇加】甘油I三醇-img/2.jpg</b><br>品牌:美国eb5产地:美国<br>规格/纯度:99.9%起定量: 215千克<br>配送仓储:.上海汇 加仓储",
         imgurl:"img/1.png",
         price:100242,
         count:3,
         checked:false},
         {msg:"<b>【汇加】撒地方撒地方-img/3.jpg</b><br>品牌:中国eb5产地:中国<br> 规格/纯度:82%起定量: 215千克<br> 配送仓储:北京汇加仓储",
         imgurl:"img/2.png",
         price:714,
         count:3,
         checked:true},
         {msg:"<b>【汇加】大龄剩女成员-img/4.jpg</b><br>品牌:法国eb5产地:法国<br>规格/纯度:52%起定量: 215千克<br>配送仓储:巴黎汇加仓储",
         imgurl:"img/3.png",
         price:729,
         count:3,
         checked:true},
         {msg:"<b>【汇加】跑到门口的等等吧-img/5.jpg</b><br>品牌:英国eb5产地:英国<br>规格/纯度:69%起定量: 215千克<br>配送仓储:伦敦汇加仓储",
         imgurl:"img/4.png",
         price:526,
         count:3,
         checked:false}
      ],
      quan:""
   },
   methods:{
      //全选按钮
      qaunfun(){
         this.arr.map((item)=>{
            if(this.quan){
               item.checked=false
            }else{
               item.checked=true
            }
         })
      },
      //删除本行商品
      delline(index){
         this.arr.splice(index,1);
      },
      delxuan(){
         var arrnew=[]
         this.arr.map((item)=>{
            if(!item.checked){
               arrnew.push(item)
            }
         })
         this.arr=arrnew
      }
   }
})