这个是我在学习Vue的计算属性监听属性后想到的，我就觉得很神奇，就了解了一下，我发现用这个技术做购物车太好用了，之前我写过购物车，那简直对我来有点小困难，但是学习了这个技术写个购物车还是很简单的，在性能方面提高了效率，哈哈哈哈 ，这是我前几天发表的，用Vue写的一个购物车，我想了一下，我觉得还不够完美，我觉得还需要改善一下，我添加了全选和反选的功能，还有模糊查询的功能…欢迎大家前来打赏，嘻嘻嘻…
我的结构目录；
接下来就的是代码的实现
Vue.js监听购物车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js监听购物车</title>
<link type="text/css" href="css/index.css" />
<link type="text/css" href="css/bootstrap.css" />
<script src="js/vue.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div id="shopcart">
<div class="panel panel-success" style="margin:20px;">
<!-- 头部 -->
<div class="panel-heading">
<h1>Vue测试监听查询购物车数量及金额变化</h1>
</div>
<!-- 搜索 -->
<div class="panel-body">
<div class="input-group">
<span class="input-group-btn">
<a class="btn btn-success">名称搜索</a>
</span>
<input class="form-control" type="text" placeholder="请输入查询内容" v-model="input" />
</div>
</div>
<!-- 内容 -->
<div class="panel-body">
<table class="table table-condensed">
<thead>
<tr>
<th colspan="1"><input type="checkbox" v-model="checkAll" @change="checkAllChange()">全选</th>
<th>图片</th>
<th>商品名称</th>
<th>商品数量</th>
<th>商品单价(元)</th>
<th>商品金额(元)</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(v,i) in searchData" :key="i">
<td><input type="checkbox" v-model="v.check" @change="curChange()"></td>
<td><img :src="v.img_url" /></td>
<td>{{v.name}}</td>
<td>
<button :disabled="v.count==0" @click="v.count-=1">-</button>
{{v.count}}
<button @click="v.count+=1">+</button>
</td>
<td>{{v.price | priceFilter(3)}}</td>
<td>{{v.count*v.price | priceFilter(1)}}</td>
<td><button type="button" class="btn btn-success btn-sm">商品详情</button></td>
</tr>
<tr>
<td colspan="6">{{totalCount}}件商品总计（不含运费）：{{totalPrice | priceFilter(2)}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</script>
</html>运行效果：
当苹果的商品数量为2时，它的商品金额会发生改变，如图所示：
从上图所知，我们可以很清楚地知道苹果的商品金额为20
全选功能
反选功能
模糊查询
这是我改善的购物车哦，怎么样，还不错吧
谢谢