最新下载
24小时阅读排行榜
- 1 怎么把css和js并到html里面_CSS与JS合并到HTML文件技巧【指南】
- 2 关联数组遍历怎么用_PHP foreach遍历关联数组【教程】
- 3 URL参数解析_PHP parse_url解析网址【操作】
- 4 CodeIgniter数据库表前缀怎么设置_CodeIgniter表前缀配置详解【解答】
- 5 HTML表格怎么创建_表格内容添加汇总【汇总】
- 6 Hyperf安装扩展包怎么选择_Hyperf第三方包推荐和安装技巧【解答】
- 7 Swoole死锁问题怎么排查_Swoole锁机制故障诊断【方法】
- 8 PHP框架如何输出JSON_新手API接口返回JSON数据方法【操作】
- 9 PHP框架数据库连接失败_连接错误与配置检查方法【指南】
- 10 PHP 数组求前 N 项和算法
- 11 PHP代码怎么在命令行运行_PHP CLI模式使用指南【教程】
- 12 PHP框架如何在Windows和Linux运行_跨平台环境搭建教程【指南】
- 13 PHP 数据库事务控制完整示例
- 14 CodeIgniter结构响应压缩输出如何启用_CodeIgniter响应压缩配置【详解】
- 15 Laravel 中安全下载 Storage 目录下文件的完整实现方案
最新教程
-
- Node.js 教程
- 18397 2025-08-28
-
- CSS3 教程
- 1553702 2025-08-27
-
- Rust 教程
- 25532 2025-08-27
-
- Vue 教程
- 27205 2025-08-22
-
- PostgreSQL 教程
- 23571 2025-08-21
-
- Git 教程
- 10448 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中文网。
相关推荐
jQuery仿京东商城侧边栏购物车菜单代码
热门下载
canvas音谱可视化mp3音乐播放器代码
