vue实现购物车小案例实现购物车小案例
主要为大家详细介绍了vue实现购物车小案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现购物车小案例的具体代码，供大家参考，具体内容如下
最终效果
HTML部分：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>shopcar.html</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="css/shopcar.css" >
<script src="js/shopcar.js"></script>
</head>
<body>
<div class="content1" id="content1">
<div class="con1">
<input type="checkbox" id="all" class="all">
<p>全选</p>
<p>商品</p>
<p>单价</p>
<p>数量</p>
<p>小计</p>
<p>操作</p>
</div>
<div class="con2">
<ul class="uls1">
<input type="checkbox" class="jingdong">
<p class="uls1p2">京东自营</p>
</ul>
<ul class="uls1a">
<p>满赠</p>
<a href="#" >活动商品满19，即可领取商品一件></a>
<p>查看赠品</p>
<a href="#" >去凑单</a>
</ul>
<ul class="uls2" id="box">
<input type="checkbox" class="all all1">
<a href="#" >
<img src="img/aaa.jpg" alt="">
<p>OPPO R11全网通双卡双待 64G 32G<br> 手机 玫瑰金色</p>
</a>
<p class="weight"><i id="weight">￥2000</i></p>
<button class="min" @click="sub(1,2000)">-</button>
<input ref="add1" type="text" class="txt" v-model="add1">
<button class="add" @click="add(1,2000)">+</button>
<p class="xiaoji"><i id="xiaoji1">￥{{add2}}</i></p>
<p class="a666 b666">删除</p>
<p class="a666">移到我的关注</p>
<p class="a666">加到我的关注</p>
</ul>
<ul class="uls2" id="box2">
<input type="checkbox" class="all all2">
<a href="#" >
<img src="img/bbb.jpg" alt="">
<p>OPPO R11全网通双卡双待 64G 32G<br> 手机 玫瑰金色</p>
</a>
<p class="weight"><i id="weight">￥3000</i></p>
<button class="min" @click="numsub(1,3000)">-</button>
<input ref="num1" type="text" class="txt" v-model="num1">
<button class="add" @click="numadd(1,3000)">+</button>
<p class="xiaoji"><i id="xiaoji1">￥{{num2}}</i></p>
<p class="a666 b666">删除</p>
<p class="a666">移到我的关注</p>
<p class="a666">加到我的关注</p>
</ul>
<div class="uls4">
<div class="uls4L">
<input type="checkbox" class="all">
<a href="#" class="delete">删除选中商品</a>
<a href="#" >移到我的关注</a>
下载后可阅读完整内容，剩余7页未读，立即下载
weixin_38590738
- 粉丝: 8
- 资源: 902
我的内容管理
展开
最新资源
- OptiX传输试题与SDH基础知识
- C++Builder函数详解与应用
- Linux shell (bash) 文件与字符串比较运算符详解
- Adam Gawne-Cain解读英文版WKT格式与常见投影标准
- dos命令详解：基础操作与网络测试必备
- Windows 蓝屏代码解析与处理指南
- PSoC CY8C24533在电动自行车控制器设计中的应用
- PHP整合FCKeditor网页编辑器教程
- Java Swing计算器源码示例：初学者入门教程
- Eclipse平台上的可视化开发：使用VEP与SWT
- 软件工程CASE工具实践指南
- AIX LVM详解：网络存储架构与管理
- 递归算法解析：文件系统、XML与树图
- 使用Struts2与MySQL构建Web登录验证教程
- PHP5 CLI模式：用PHP编写Shell脚本教程
- MyBatis与Spring完美整合：1.0.0-RC3详解
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
