vue购物车效果

最新推荐文章于 2024-07-24 11:11:41 发布

as_long_

最新推荐文章于 2024-07-24 11:11:41 发布

阅读量403

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/as_long_/article/details/120639601

版权

一、介绍

vue购物车效果实现了全选、加减和总价等效果

二、过程

首先写一个表格，第一行写序号、名称等、后面通过v-for遍历data里面的list渲染页面，最后写总价，每一个商品后面跟的单独的总价是当前商品的单价乘以当前商品的数量：

<table id="app" border="1" cellspacing="0" cellpadding="0" width="600" height="500">
			<tr align="center">
				<th><input type="checkbox" v-model="check" @change="checkedchange" /></th>
				<th>序号</th>
				<th>名称</th>
				<th>个数</th>
				<th>单价</th>
				<th>库存</th>
				<th>总价</th>
			</tr>
			<tr v-for="item in list">
				<td><input type="checkbox" v-model="list