最新下载
24小时阅读排行榜
- 1 安卓追书神器免费下载_官方网页版小说阅读链接
- 2 Linux命令行中ifconfig与ip命令的区别
- 3 如何自己缴纳社保？
- 4 Java中字符串常量池的核心作用
- 5 AdobeFirefly模型怎么创建民间故事艺术_AdobeFirefly模型创建民间故事艺术全面指导
- 6 Java中注解的核心概念和使用价值
- 7 PHP代码怎么连接数据库_ PHP数据库连接配置与查询执行步骤
- 8 HTML与D3.js数据可视化前端库结合_HTML与D3.js数据可视化前端库结合详解
- 9 Snakemake在Slurm环境下实时输出与规则优化：深度教程
- 10 Java 项目 Makefile 指南：编译、执行与命令行参数处理
- 11 安装Java时如何避免与已有软件冲突
- 12 Java 项目 Makefile 实践：编译、运行与命令行参数处理
- 13 php怎么输出helloworld_php输出helloworld的基础语法详解
- 14 SQL 分组查询多条件筛选怎么写？
- 15 PHP如何处理错误和异常_PHP错误与异常处理机制详解
最新教程
-
- Node.js 教程
- 2814 2025-08-28
-
- CSS3 教程
- 296125 2025-08-27
-
- Rust 教程
- 3444 2025-08-27
-
- Vue 教程
- 4166 2025-08-22
-
- PostgreSQL 教程
- 4316 2025-08-21
-
- Git 教程
- 3297 2025-08-21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
<title>vue购物车商品累加结算代码 </title>
<!--css类引用-->
<link rel="stylesheet" href="js/layui/css/layui.css" />
<link rel="stylesheet" href="js/eleme-ui/index.css" />
<link rel="stylesheet" href="css/ShoppingCart.css" />
</head>
<body>
<!--主要内容-->
<div class="row " id="myVue" v-cloak>
<div class="col-lg-10 col-lg-offset-1" >
<div class="layui-form">
<table class="ShopCartTable layui-table">
<thead>
<tr>
<th class="selectLeft">
<template>
<el-checkbox @change="checkedAllBtn(checkedAll)" v-model="checkedAll">全选</el-checkbox>
</template>
<span class="selectLeftGoods">商品或服务名称</span>
</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(tabledatas,index) in shopTableDatas">
<td class="selectLeft">
<template>
<el-checkbox @change="checkedRadioBtn(tabledatas)" v-model="tabledatas.checked"></el-checkbox>
</template>
<span class="goodName">
<img class="goodImg" :src="tabledatas.src" />
</span>
<span class="goodName goodsName">
<h2 class="goodname" v-text="tabledatas.name"></h2>
<p class="goodGary">
<span>供应商：</span>
<span v-text="tabledatas.supplier"></span>
</p>
<p class="goodGary">
<span>发货地：</span>
<span v-text="tabledatas.ConPlace"></span>
</p>
</span>
</td>
<td class="danPrice">{{tabledatas.price | moneyFiler}}</td>
<td>
<i @click="goodNum(tabledatas,-1)" class="fa deleteBtn" aria-hidden="true">-</i>
<input v-model="tabledatas.num" type="text" class="form-control numInput" aria-label="...">
<i @click="goodNum(tabledatas,1)" class="fa addBtn" aria-hidden="true">+</i>
</td>
<td>
<p class="totalPrice">{{tabledatas.price*tabledatas.num | moneyFiler}}</p>
</td>
<td class="gongneng">
<p class="deletegoods" @click="alertRadio(index)">删除</p>
<p @click="alertmovesSavegoods(index)">移到我的收藏</p>
<template v-if="tabledatas.saveandremove">
<p @click="tabledatas.saveandremove = false">加入收藏</p>
</template>
<template v-else>
<p :class="{'saveCheck':!tabledatas.saveandremove}" @click="tabledatas.saveandremove = true">取消收藏</p>
</template>
</td>
</tr>
</tbody>
</table>
<div class="row tablefooter">
<template>
<el-checkbox style="padding-left:16px" @change="checkedAllBtn(checkedAll)" v-model="checkedAll">全选</el-checkbox>
</template>
<span class="removeMuch" @click="alertMuch">删除选中的商品或服务</span>
<span class="removeSaves" @click="alertMuchgoods">移到我的收藏</span>
<span class="servicenum">已选择<span class="goodsNum">{{goodsNum}}</span>件商品<span class="goodsNum">{{serviceNum}}</span>项服务</span>
<span class="totalclassPoin">总价：<span class="totalMoneyClass">{{totalMoney | moneyFiler}}</span></span>
<span @click="saveData" class="SettlementBtn">去结算</span>
</div>
</div>
</div>
</div>
<!--js类引用-->
<script type="text/javascript" src="js/vue/vue.min.js" ></script>
<script type="text/javascript" src="js/eleme-ui/index.js" ></script>
<script type="text/javascript" src="js/ShoppingCart.js" ></script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>
这是一个j购物车商品累加结算效果，需要的朋友可以直接下载使用，更多特效代码尽在PHP中文网。
相关推荐
javascript实现购物车效果
热门下载
canvas音谱可视化mp3音乐播放器代码
