Vue购物车案例（全选，反选，加入，删除，加减，总价，数量）

已于 2022-07-14 10:32:35 修改
阅读量1w 收藏 71
点赞数 10
分类专栏： Vue 文章标签： vue.js javascript html
于 2021-09-22 19:09:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51501183/article/details/120420957
版权
本文通过Vue.js展示了如何创建一个购物车功能，包括商品的全选、反选、添加、删除、数量增减以及总价计算。首先，展示了购物车的最终效果，接着详细解释了相关代码实现，并提供了用于该功能的数据结构。
摘要由CSDN通过智能技术生成

1.购物车效果图

2.代码展示 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		body{
			font-size: 16px;
		}
		table {
			width: 1200px;
		}
		ul li{
			list-style: none;
		}
		table th {
			width: 100px;
		}
		
		table td {
			width: 200px;
			text-align: center;
		}
		
		.m {
			width: 20px;
		}
		.shang{
			width: 30%;
			float: left;
			text-align: center;
		}
	</style>

	<body>
		<div id="app">
			<div id="div">
				<h1>商品</h1>
				<div class="shang"  v-for="item in list">
				<ul>
					<li>{
  {item.name}}</li>
					<li><img v-bind:src="item.imgsrc" wi
最低0.47元/天 解锁文章
昨日的某某
关注
  • 10
    点赞
  • 踩
  • 71
    收藏
    觉得还不错? 一键收藏
  • 16
    评论
专栏目录
Vue购物车全选、反选——单选全部选中、全选自动选中以及总价
A_gyb的博客
09-10 2960
1.模拟购物车数据 data() { return { //模拟购物车数据arr arr:[ { ischeck:false, //默认为false name:'篮球', price:98 }, { ischeck:false, //默认为false name:'足球', price:10
vue中实现商品购物车全选反选
qq_44242030的博客
03-31 1580
项目需求： 实现一个购物车 全选框实现对商家和商品的全选 商家全选框实现对当前商家所有商品的全选 取消其中一个商品则取消对应商家全选和全选框 选中一个商家下的所有商品则勾选对应商家的全选框，不勾选全选框 选中所有商品则勾选所有商家全选框和全选框 我的思路： 1、通过对数据的简单操作可实现更深层次的全选操作 2、vue.$set(object, key, value)给对象添加属性可以更新视图 3、...
vue实现购物车加减
10-15
主要为大家详细介绍了vue实现购物车加减，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue-购物车案例
a_xia_o的博客
07-21 710
1.案例效果 2.实现步骤 ①初始化项目基本结构 ②封装EsHeader组件 2.1创建并注册EsHeader组件 2.2封装es-header组件 ③基于axios请求商品列表数据（GET请求，地址为https://www.escook.cn/api/cart） ④封装EsFooter组件 4.1创建并注册EsFooter组件 4.2封装es-footer组件 4.2.0封装需求 4.2.1渲染组件的基础布局 4.
vue学习笔记（购物车小案例）
最新发布
mez_Blog的博客
07-06 766
写一个按钮，当我们点击按钮的时候，就可以看到arrTest2返回的值，我们可以看到多了一个true，因为在执行every后，this.testEvery=true，对应页面的testEvery值也会进行显示。然后解释一下，这里首先使用filter方法将满足选中状态的商品进行过滤，返回的是一个数组，然后再将返回的数组使用累加方法reduce进行金额的计算。解释一下，第一个参数就是传递过来的值，是加1，还是加-1，第二个值就是对应的索引，因为要对对应的商品进行数量加减操作，所以需要对应商品的索引。
Vue.js实现购物车checkbox的全选与反选
04-13
购物车的基本操作，推荐全选与反选代码片段，简单易懂，没上传node_modules依赖，下载后自行install
案例：购物车全选
青衣的博客
09-02 633
<div class="c-container"> <div class="w"> <div class="cart-warp"> <!-- 头部全选模块 --> <div class="cart-thead"> <div class="t-checkbox"> <input type=.
vue 实现购物车数量加减
鲸鱼饱饱
07-15 2374
vue 实现数量加减 HTML <div class="shoplist" v-for="(item,index) in list" :key="index"> <div>{{item.name}}</div> <div class="redAdd shoplist"> <button @click="red(index)">-</button> <div>
vue使用监听实现全选反选功能
08-27
Vue 使用监听实现全选反选功能 在 Vue 中实现全选反选功能是一个常见的需求，特别是在项目中需要处理大量数据时。本文将介绍如何使用 Vue 监听实现全选反选功能，通过监听子集的变化来更新全选按钮的状态。 标题...
vue实现全选反选
zhao_li_ming的博客
10-04 5109
1.效果图 2.分析步骤 两种方法： （1）普通全选反选实现，通过methods方法实现 1.首先写vue先引入：<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> 2.接着写静态布局 3.挂载dom ...
apicloud中vue处理购物车全选单选
01-15
使用vue在apicloud实现 购物车的全选单选 只要是拿一个字段作区分 那他去作区分 最麻烦的就是ios不能全选 但是我是经过api.systemType 做过处理 ios和安卓的区分 <input class="aui-radio" v-model="vo.is_select" v-if="api.systemType=='ios'" @touchstart.prevent="update_cart_selectss(index)" type="checkbox"> <input class="aui-radio" :checked="vo.is_select" v-else @click.stop="update_cart_selects(index)" type="checkbox"> ios下多个settimeout延迟加载 记住这一点
vue2.0在table中实现全选和反选的示例代码
08-28
Vue 2.0 中 Table 全选和反选的示例代码 在 Vue 2.0 中实现 Table 全选和反选是一种常见的交互方式，本文将介绍如何在 Vue 2.0 中实现 Table 全选和反选的示例代码。 知识点 1: 使用 Vue 的模板语法实现 Table 的...
vue实现全选、反选功能
08-30
Vue实现全选、反选功能 Vue实现全选、反选功能是指在Vue中实现选择所有项目或取消选择所有项目的功能。这种功能在实际应用中非常常见，例如在用户管理系统中，需要选择所有用户或取消选择所有用户。 在实现全选、...
vue项目中购物车的全选，反选，单选，删除，计算总价钱
zb981027的博客
12-03 2048
购物车的全选，单选，删除，计算总价钱 获取数据 使用axios方法请求后台获取数据，然后把获取到的数据渲染到页面上 单选，计算价钱 点击单个商品卡片的时候传这个当前商品的信息，然后在事件中检查当前信息中存在不存在选中的属性(check == true)如果不存在则给这个信息中添加这一属性(this.$set(item,“check”,true))，然后定义的被选中的商品数量(allCou...
vue购物车
sunyyyyy1的博客
05-17 473
vue实现购物车全选反选，计算价格等 20220517_144629 <template> <div> <table cellpadding="0" cellspacing="0" border="1"> <thead> <tr>
AngularJS表格数据全选反选批量删除,删除的数据添加到数组里
thw_m的博客
10-24 641
var app = angular.module("myApp",[]);             app.controller("myCtrl",function($scope){                 $scope.shops = [{                     name:"qq1",                     price:12.9,      
Vue购物车数量加减
uyiub的博客
01-10 1077
代码： 数量为减到一时，再点击恒为一
vue初学——购物车案例，增删改、加减
Mr_QinHongXin的博客
06-23 973
vue初学之购物车案例
用vue写一个带全选反选和总价的购物车案例
05-24
好的，这是一个简单的购物车例子： ```html <template> <div> <table> <thead> <tr> <th><input type="checkbox" v-model="selectAll" @change="toggleSelectAll"/></th> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>小计</th> </tr> </thead> <tbody> <tr v-for="(item, index) in items" :key="index"> <td><input type="checkbox" v-model="item.selected"/></td> <td>{{ item.name }}</td> <td>{{ item.price }}</td> <td> <button @click="decreaseQuantity(item)" :disabled="item.quantity === 1">-</button> <span>{{ item.quantity }}</span> <button @click="increaseQuantity(item)">+</button> </td> <td>{{ item.price * item.quantity }}</td> </tr> </tbody> <tfoot> <tr> <td><button @click="selectAll = !selectAll">{{ selectAll ? '取消全选' : '全选' }}</button></td> <td colspan="3">总价：</td> <td>{{ totalPrice }}</td> </tr> </tfoot> </table> </div> </template> <script> export default { data() { return { items: [ { name: '商品1', price: 10, quantity: 1, selected: false }, { name: '商品2', price: 20, quantity: 2, selected: false }, { name: '商品3', price: 30, quantity: 3, selected: false }, ], selectAll: false, }; }, computed: { totalPrice() { return this.items .filter(item => item.selected) .reduce((total, item) => total + item.price * item.quantity, 0); }, }, methods: { toggleSelectAll() { if (this.selectAll) { this.items.forEach(item => item.selected = true); } else { this.items.forEach(item => item.selected = false); } }, increaseQuantity(item) { item.quantity += 1; }, decreaseQuantity(item) { item.quantity -= 1; }, }, }; </script> ``` 在这个例子中，我们使用 `v-model` 来绑定复选框的状态和每个商品的选择状态。我们还使用 `computed` 属性来计算购物车中所有已选择商品的总价。最后，我们使用 `methods` 中的函数来增加或减少商品的数量，并使用 `v-bind` 来禁用减少数量按钮（当商品数量为1时）。
评论 16
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值