本文实例为大家分享了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>
