<template>
<div class="about">
<div>
<table style="width: 1000px;">
<tr>
<!-- <th><h1>购物车</h1></th> -->
</tr>
<tr>
<th><input type="checkbox" @change="handleChange()" v-model="flag"></th>
<th>序号</th>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>操作</th>
</tr>
<tr v-for="item in dataList">
<td><input type="checkbox" v-model="checkgroup" :value="item" @change="handleChange1()"></td>
<td>{
{item.id}}</td>
<td>{
{item.name}}</td>
<td>{
{item.price}}</td>
<td>
<button @click="jian(item)
js之购物车代码逻辑
最新推荐文章于 2024-09-28 23:02:25 发布
这是一个使用 Vue.js 实现的购物车应用示例。代码展示了如何创建一个表格来显示商品信息,包括商品的序号、名称、价格和数量,并提供了加减数量和删除操作。此外,还实现了全选/全不选功能以及商品总价的实时计算。用户可以通过勾选复选框选择商品,总价会根据所选商品的数量和价格动态更新。
摘要由CSDN通过智能技术生成