最新下载
Twitter Bootstrap表单验证
门户网站jQuery相册代码
24小时阅读排行榜
- 1 Laravel中如何查看SQL执行日志_Laravel开启打印SQL语句方法【技巧】
- 2 什么是javascript数组_有哪些高阶函数方法【教程】
- 3 JavaScript垃圾回收机制如何管理内存【教程】
- 4 如何将 POST 数据持久化保存到 PHP 文件中并实现离线访问
- 5 ext4 "EXT4-fs warning: 31 callbacks suppressed" 日志刷屏的抑制方法
- 6 如何在Golang中优化微服务调用延迟_Golang微服务性能提升方法
- 7 如何在Golang Web中实现静态资源服务_静态文件处理方案
- 8 javascript怎样进行错误调试【教程】
- 9 如何在Golang中优化并发性能_Golang goroutine调度与资源管理方法
- 10 c++中如何防止头文件重复包含_c++ #ifndef与#pragma once区别【实例】
- 11 c++中如何判断一个数是否为丑数_c++丑数分解算法实现【详解】
- 12 Go 中变参函数不支持混合使用展开切片与普通参数的原理与解决方案
- 13 Golang make函数适用于哪些类型_make使用规则解析
- 14 如何在纯静态网站中统一管理多页面导航栏（无需 PHP）
- 15 javascript如何操作音频和视频？_探索javascript媒体编程【教程】
最新教程
-
- Node.js 教程
- 15914 2025-08-28
-
- CSS3 教程
- 1545994 2025-08-27
-
- Rust 教程
- 23106 2025-08-27
-
- Vue 教程
- 25577 2025-08-22
-
- PostgreSQL 教程
- 22081 2025-08-21
-
- Git 教程
- 9085 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音乐播放器代码
