基于vue购物车的全选，清空，实时计算等功能

Junju_

已于 2023-01-26 14:19:31 修改

阅读量571

点赞数

分类专栏： vue练习题文章标签： vue.js javascript 前端

于 2022-10-21 11:59:09 首次发布

本文链接：https://blog.csdn.net/m0_58451019/article/details/127443569

版权

vue练习题专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<style type="text/css">
			img{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="row text-center align-items-center">
				<h3 class="col-6 offset-3">购物车</h3>
				<div @tap="qk()" @click="qk()" class="text-danger col-3 small ">
					清空购物车
				</div>
			</div>
			
			<template v-for=" item in gwc " >
				<div class="media p-2 border-bottom">
					<input type="checkbox" v-model="item.ischecked" />
					<img :src="item.src" >
					<div class="media-body">
						<div >
							{{item.sname}}
						</div>
						<div class="d-flex justify-content-between mt-5 " >
							<div>￥{{item.price.toFixed(2)}}</div>
							<div> <span @click="item.sl>1?item.sl--:item.sl">-</span> &nbsp; {{item.sl}} &nbsp; <span @click="item.sl++" >+</span> </div>
						</div>
					</div>
				</div>
			</template>
			
			
			<div class="fixed-bottom">
				<input type="checkbox" v-model="qbnr" /> 全选  合计： <span class="text-danger"> ￥ {{totalprice.toFixed(2)}}  </span>   <button type="button" class="btn btn-sm btn-danger" >去结算（{{qjsgs}}）</button>
			</div>
			
		</div>
	</body>
	
	<script type="text/javascript">
		new Vue({
			el:"#app",
			data:{
				gwc:[
					{ id:1,ischecked:true,src:"img/1.avif",sname:"汉康土豆 90",price:1.9,sl:1 },
					{ id:2,ischecked:false,src:"img/2.avif",sname:"美人豆腐 400g/盒",price:2,sl:1 },
					{ id:3,ischecked:true,src:"img/3.png.avif",sname:"优质西红柿 300g",price:2.2,sl:1 }
				]
			},
			methods:{
				qk(){
					this.gwc = []
				}
			},
			computed:{
				qjsgs(){
					var zj = 0;
					for (let g of this.gwc) {
						if(g.ischecked) zj++;
					}
					return zj
				},
				totalprice(){
					var zj = 0;
					for (let g of this.gwc) {
						if(g.ischecked) zj += g.price*g.sl;
					}
					return zj
				},
				qbnr:{
					get:function(){
						if(this.gwc.length==0) return false;
						for (let g of this.gwc) {
							if(!g.ischecked){
								return false;
							}
						}
						return true;
					},
					set:function(value){
						for (let g of this.gwc) {
							g.ischecked = value
						}
					}
				}
			}
		})
	</script>
</html>