Vue购物车功能

最新推荐文章于 2024-03-10 12:33:11 发布

木子矢口曰弓虽

最新推荐文章于 2024-03-10 12:33:11 发布

阅读量150

点赞数

分类专栏： HTML Vue JS

本文链接：https://blog.csdn.net/weixin_40873080/article/details/85232327

版权

HTML 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

Vue

2 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>购物车</title>
	<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
	<style>
		[v-cloak]{
			display: none;
		}
	</style>
</head>
<body>
	<div id="app" v-cloak>
		<div class="container">
			<div class="row">
				<table class="table table-border table-hover">
					<div class="col-xs-12 col-md-12 col-lg-12">
						<div class="text-primary text-center h2">购物车</div>
					</div>
					<tr>
						<th>全选<input type="checkbox" v-model="checkAll"></th>
						<!-- 这里的全选的选中状态是根据下面商品的选中状态来计算的，所以我们这里写在计算属性中 -->
						<td>商品</td>
						<td>单价</td>
						<td>数量</td>
						<td>小计</td>
						<td>操作</td>
					</tr>
					<tr v-for="(item, index) in productLists"><!-- 循环从json拿到的数据 -->
						<td><input type="checkbox" v-model="item.isSelected"></td>
						<td>
							<img :src="item.productCover" :alt="item.productName"><!-- v-bind的缩写 -->
							{{item.productInfo}}
						</td>
						<td>{{item.productPrice}}</td>
						<td><input type="number" v-model.number="item.productCount" min="1"></td>
						<!-- 只能输入数字，限制最小值是1 -->
						<td>{{item.productPrice * item.productCount | toFixed(2)}}</td><!-- 这里直接是单价乘数量算出小计，“|”是管道符，后面跟着自定义的过滤函数，传一个参数给过滤函数。 -->
						<td><button class="btn btn-danger" @click="remove(item)">删除</button></td>
						<!-- 给删除按钮绑定一个点击事件，传入item给点击事件 -->
					</tr>
					<tr>
						<td colspan="6">总价：￥{{ sum | toFixed(2) }}</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
	<script type="text/javascript" src="node_modules/axios/dist/axios.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#app",
			data: {
				productLists: [],
			},
			filters: {
				toFixed (input, param1) {//这里的input是值管道符前面的运算结果,param1是定义一个变量接收过滤函数传过来的参数
					return input.toFixed(param1);
				},
			},
			computed: {
				checkAll: {
					get () {//在第一次页面加载过程中，checkAll就会调用get方法，获取当前自己应该是什么状态。
						return this.productLists.every(item => {//用every方法，因为如果数组中有一个是false，every方法就会返回false，跟我们的全选是一样的，有一个没选中就是false。
							return item.isSelected;//找到false，返回false
						});
					},
					set (val) {//当我们改变全选的选中框，就会得到一个参数，这个参数代表的是我们改变全选框之后的状态。
						this.productLists.forEach(item => {//这里用循环数组的方法来给每一个商品的选中进行赋值，跟全选的输入框是同一个状态。
							return item.isSelected = val;
						})
					},
				},
				sum () {//如果写成函数形式，默认使用get方法，因为是总价，所以是不能有set方法
					return this.productLists.reduce((prev, next) => {//
						if (!next.isSelected) return prev;//如果商品是没有选中状态的，将直接返回prev，不计算本轮。
						return prev+next.productPrice*next.productCount;//第一次的prev给默认指定是0，所以next是第一个商品，直接是第一个商品的数量乘价格。reduce每一轮循环返回的数值就是下一轮的prev。所以这对每一个选中的商品进行求和
					},0)//这个0是指定默认的第一次的prev是0
				}
			},
			created () {//实例加载完成后执行,this指向实例
				this.getData();//页面第一次加载过程中执行请求商品数据
			},
			methods: {
				getData () {
					axios.get("cars.json").then( res => {
						this.productLists = res.data;
						//将axios拿到的数据赋值给vue的productLists，这里用箭头函数是想this指向实例。
					}, err => {
						console.log(err);
					})
				},
				remove (val) {//定义一个变量来接收传过来的参数
					var comfirmResult = confirm("确定删除吗？");//给一个反悔的机会，确认才会删除数据
					if(comfirmResult){//如果点击确认，返回的是true，所以删除，取消则不操作
						this.productLists = this.productLists.filter(item => {
						//给productLists来一个过滤函数，将数组的每一项进行对比，如果跟传过来的参数对比，不相等的就返回到新的数组，然后赋值给原有的productLists，从而达到删除当前点击的那一项数据。
							return item !== val;
						});
					}
				}
			}
		})
	</script>
</body>
</html>

木子矢口曰弓虽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue购物车功能

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;购物车&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" h
复制链接

扫一扫

专栏目录