用Vue框架实现购物车和记事本功能的步骤及解析_vue写的购物车详细步骤图片-CSDN博客

本文链接：https://blog.csdn.net/m0_63851202/article/details/122382935

购物车

购物车需求如下：

实现金额运算，金额=单价*数量
实现数量的加减功能
点击全选按钮，所有商品的复选框按钮点亮
再次点击全选按钮，所有商品的复选框按钮熄灭
只要有一个商品未被勾选，则全选复选框熄灭，所有商品都勾选，则全选自动点亮
点击删除，则删除当前商品
实现总计，为勾选的商品的金额之和

代码实现如下：

HTML部分


    <table border="1" cellspacing="0">
		<tr>
			<!-- 全选框，双向绑定，用户点击便改变model数据，改变数据则触发事件 -->
			<td><input type="checkbox" v-model="allChecked" @change="allCheckedFun" /></td>
			<td>编号</td>
			<td>名称</td>
			<td>单价</td>
			<td>数量</td>
			<td>金额</td>
			<td>操作</td>
		</tr>
		<!-- 循环指令，遍历model数据动态生成商品tr，一个tr代表一个商品 -->
		<tr v-for="(good,index) in goods" :key="good.id">
			<!-- 商品是否选中复选框，双向绑定，改变状态则触发事件 -->
			<td><input type="checkbox" v-model="good.checked" / @change="backAllCheckedFun"></td>
			<!-- 商品编号 -->
			<td>{{good.id}}</td>
			<!-- 商品名称 -->
			<td>{{good.name}}</td>
			<!-- 商品价格 -->
			<td>{{good.price}}</td>
			<!-- 商品数量，点击按钮事件实现数量增减，需要传实参，实参为当前商品（tr）的下标 -->
			<td><input type="button" value="-" @click="prev(index)" />{{good.count}}<input type="button" value="+"
					@click="next(index)" /></td>
			<td>{{good.price*good.count}}</td>
			<!-- 点击删除当前商品，需要实参，实参为当前商品（tr）的下标 -->
			<td><input type="button" value="删除" @click="remove(index)" /></td>
		</tr>
		<tr>
			<!-- 商品金额总计 -->
			<td colspan="7">总计：{{sumPrice()}}</td>
		</tr>
	</table>

js部分

let vm = new Vue({
		el: "table",
		data: {
			//单个复选框，false为未选中,true为选中
			allChecked: false,
			goods: [{
				//单个复选框(商品的复选框需要写到商品数据中并加入循环和双向绑定，因为商品数量过多不方便在data中定义多个属性并控制其状态)
				checked: false,
				id: "001",
				name: "超级电视",
				price: 9000,
				count: 1
			}, {
				//单个复选框
				checked: false,
				id: "002",
				name: "超级马桶",
				price: 5000,
				count: 1
			}, {
				//单个复选框
				checked: false,
				id: "003",
				name: "超级扫地机",
				price: 1000,
				count: 1
			}]
		},
		methods: {
			//数量增
			next(i) {
				this.goods[i].count++;
			},
			//数量减
			prev(i) {
				this.goods[i].count--;
				if (this.goods[i].count <= 1) {
					this.goods[i].count = 1;
				};
			},
			//全选框事件，遍历所有商品，改变其复选框状态
			allCheckedFun() {
				this.goods.forEach((good) => {
					//跟随全选框的状态
					good.checked = this.allChecked;
				})
			},
			//反选事件，每个商品的复选框状态发生改变，都需要触发此方法
			backAllCheckedFun() {
				//如果每个商品的复选框状态都为选中，则全选框选中，如果有一个未选中，则全选框未选中
				this.allChecked = this.goods.every(good => good.checked == true);
			},
			//删除当前tr（商品）
			remove(i) {
				this.goods.splice(i, 1);
			},
			//总计金额
			sumPrice() {
				//定义总计金额，初始值为0（所有商品未选中的状态）
				let money = 0;
				//遍历商品数据，如果当前商品复选框为选中状态则累计相加
				this.goods.forEach((good) => {
					if (good.checked) {
						money += good.count * good.price;
					}
				});
				//返回总计金额
				return money;
			}
		}
	})

记事本

记事本需求如下：

输入框输入任务信息，点击添加后，将此任务信息添加到任务列表
勾选复选框，则标记此任务为完成状态
任务完成后，不得再改变任务状态
点击删除已完成事项，则删除所有已完成的任务
显示任务总数以及未完成任务数量

代码实现如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 提前设置任务完成状态的样式 */
			.remove {
				text-decoration: line-through;
				color: #666;
				background-color: white;
			}
		</style>
	</head>
	<body>
		<div>
			<!-- 任务总数是model数据中元素的个数 -->
			<!-- 未完成数是过滤掉已经完成的任务 -->
			<h3>任务总数：{{list.length}}<br>
				未完成数：{{list.filter(good=>good.checked==false).length}}<br>
				<input type="button" value="删除已完成事项" @click="remove" />
			</h3>
			<ol>
				<!-- 循环指令，根据model数据动态生成任务（一个li代表一个任务）---如果当前复选框选中（代表已完成）则remove样式生效，反之不生效 -->
				<li v-for="(info,index) in list" :class="{remove:info.checked}">
					<!-- 如果复选框已勾选，则代表已完成，已完成后禁用复选框 -->
					<input type="checkbox" v-model="info.checked" :disabled="info.checked" />{{info.text}}
				</li>
			</ol>
			<!-- 双向绑定用户输入的信息 -->
			<input type="text" v-model="addInfo" />
			<!-- 点击事件，将用户输入的信息添加到任务列表 -->
			<input type="button" value="添加事项" @click="add" />
		</div>
	</body>
</html>
<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	let vm = new Vue({
		el: "div",
		data: {
			addInfo: "",
			list: [{
				checked: false,
				text: "早上6：00起床练习Vue"
			}, {
				checked: false,
				text: "晚上20：00跑步5公里"
			}]
		},
		methods: {
			//将用户输入的信息添加到任务列表 
			add() {
				//如果用户输入了信息则执行(避免输入为空的情况)
				if (this.addInfo) {
					//添加新元素
					this.list.push({
						checked: false,
						text: this.addInfo
					});
					//清空输入框内容
					this.addInfo = "";
				}
			},
			//删除所有已完成事项
			remove() {
				//过滤方法，返回的是未完成的事项，重新赋值给当前任务队列
				this.list = this.list.filter(good => good.checked == false);
			}
		}
	})
</script>