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

最新推荐文章于 2022-06-10 10:57:31 发布

原创

最新推荐文章于 2022-06-10 10:57:31 发布 · 1.9k 阅读

17 ·

CC 4.0 BY-SA版权

本文介绍了如何使用Vue.js实现购物车功能，包括添加商品选中状态、计算选中商品总价、全选按钮功能以及商品分类。详细讲述了通过动态变量控制checked属性，实现全选和分类全选的逻辑，以及在商品点击和全选状态变化时的双向绑定。同时，文章还展示了如何处理商品的删除操作，特别在二维数组结构下对分类和商品的管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

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

思路：
添加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>{
   
   {
   
   subitem.name}}</td>

最低0.47元/天解锁文章

200万优质内容无限畅学

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

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