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>
下载后可阅读完整内容，剩余6页未读，立即下载
weixin_38640473
- 粉丝: 8
- 资源: 949
我的内容管理
展开
最新资源
- C++标准程序库：权威指南
- Java解惑：奇数判断误区与改进方法
- C++编程必读：20种设计模式详解与实战
- LM3S8962微控制器数据手册
- 51单片机C语言实战教程：从入门到精通
- Spring3.0权威指南：JavaEE6实战
- Win32多线程程序设计详解
- Lucene2.9.1开发全攻略：从环境配置到索引创建
- 内存虚拟硬盘技术：提升电脑速度的秘密武器
- Java操作数据库：保存与显示图片到数据库及页面
- ISO14001：2004环境管理体系要求详解
- ShopExV4.8二次开发详解
- 企业形象与产品推广一站式网站建设技术方案揭秘
- Shopex二次开发：触发器与控制器重定向技术详解
- FPGA开发实战指南：创新设计与进阶技巧
- ShopExV4.8二次开发入门：解决升级问题与功能扩展
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
