使用（Vue.js）实现购物车功能（包含全选、分类、删除）

最新推荐文章于 2024-05-28 18:30:26 发布

我冷漠

最新推荐文章于 2024-05-28 18:30:26 发布

阅读量1.8k

点赞数 1

本文链接：https://blog.csdn.net/weixin_43748615/article/details/104315521

版权

在这里插入图片描述

在当前示例的基础上扩展商品列表，新增一项是否选中该商品的功能，总价变为只计算选中商品的总价同时提供一个全选的按钮。

思路：
添加input元素，为其属性checked赋予动态变量，变量可在商品属性中增加一个值加以判断.
通过判断checked属性的值，确定是否添加计算到总价.
全选：也是通过添加input元素和判断checked属性，不同的是，增加其与物品的联系。
全选思考：首先是点击全选本身，很容易关联到所有商品的checked属性，在isSelectAll函数中去判断；
其二，是当所有商品全部勾选时，全选需要自动勾选，此处可以在商品的点击函数中去设置判断条件；
其三，全选勾选后，当有一商品取消勾选，全选需自动取消勾选，此处跟其二想法类似。
其二、其三这两点均在isSelectGoods函数中修改.

将商品列表list改为一个二维数组来实现商品的分类，比如可分为“电子产品”“生活用品”和“果蔬”，同类商品聚合在一起。提示，你可能会用到两次v-for。

思路：
渲染层面:由于我使用的是table,所以我是通过v-for渲染三个表格table.这里,由于采用的是二维数组存储,需要嵌套两层v-for,具体用法百度或者看代码.
数据层面:data中采用对象的二维数组形式存储.
js部分:对比与练习一,此处的对于全选方面多了分类和总体的判断.在移除方面,多了一层删除.
全选方面和练习一样,一样在isSelectAll函数中进行判断.
除了全部商品的全选,还有分类的全选,其思路和总体全选差不多,在isSelectType函数中进行判断.
所以,在单个商品的勾选中,在判断全选的范围需要有分类和总体的判断,但其实总体的判断是通过分类判断,在isSelectGoods函数中有介绍.
在移除方面,由于是二维数组,增加了多一层判断,通多判断内嵌的list的长度来删除分类,在handleRemove函数中进行判断.

HTML：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>购物车示例</title>
		<link rel="stylesheet" href="../css/style.css" />
	</head>
	<body>
		<!--v-cloak会在vue实例结束编译时从绑定的HTML元素上移出。-->
		<div id="app" v-cloak>
			<template v-if="list.length">
				<table v-for="(item,index) in list" width="600">
					<thead>
						<tr>
							<th><input type="checkbox" :checked="item.isCheckType" @click="isSelectType(index)" /></th>
							<th colspan="5">{
   {
   item.name}}</th>
						</tr>
						<tr>
							<th></th>
							<th>选择</th>
							<th>商品名称</th>
							<th>商品单价</th>
							<th>购买数量</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(subitem,subindex) in item.list" >
							<td></td>
							<td><input type="checkbox" :checked="subitem.isCheck" @click="isSelectGoods(index,subindex)" /></td>
							<td>{

最低0.47元/天解锁文章

我冷漠

关注

1
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
使用（Vue.js）实现购物车功能（包含全选、分类、删除）

在当前示例的基础上扩展商品列表，新增一项是否选中该商品的功能，总价变为只计算选中商品的总价同时提供一个全选的按钮。思路：添加input元素，为其属性checked赋予动态变量，变量可在商品属性中增加一个值加以判断.通过判断checked属性的值，确定是否添加计算到总价.全选：也是通过添加input元素和判断checked属性，不同的是，增加其与物品的联系。全选思考：首先是点击全选本身...
复制链接

扫一扫