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

已于 2022-07-14 10:32:35 修改 · 1w 阅读

文章标签：

#vue.js #javascript #html

于 2021-09-22 19:09:59 首次发布

Vue 专栏收录该内容

12 篇文章

订阅专栏

本文通过Vue.js展示了如何创建一个购物车功能，包括商品的全选、反选、添加、删除、数量增减以及总价计算。首先，展示了购物车的最终效果，接着详细解释了相关代码实现，并提供了用于该功能的数据结构。

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

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" width="80px" height="80px" /></li>
					<li>{
  
  {item.dan