vue是前端轻量级MVVM框架，入门门槛相对较低，今天用Vue做一个购物车实例，发表以便记录
原理分析和实现
首先，还是先把布局写好，和引入vue，准备vue实例，这个不多说，代码如下
Title
然后准备下列表数据，根据下面表格的箭头
productList:[ { 'pro_name': '【斯文】甘油 | 丙三醇',//产品名称 'pro_brand': 'skc',//品牌名称 'pro_place': '韩国',//产地 'pro_purity': '99.7%',//规格 'pro_min': "215千克",//最小起订量 'pro_depot': '上海仓海仓储',//所在仓库 'pro_num': 3,//数量 'pro_img': '../../images/ucenter/testimg.jpg',//图片链接 'pro_price': 800//单价 }] 准备了这么多，大家可能想到，还缺少一个，就是记录产品是否有选中，但是这个字段，虽然可以在上面那里加，但是意义不大，比如在平常项目那里！后台的数据不会这样返回，数据库也不会有这个字段，这个字段应该是自己添加的。代码如下
new Vue({ el:'#shopping-cart', data:{ productList:[ { 'pro_name': '【斯文】甘油 | 丙三醇',//产品名称 'pro_brand': 'skc',//品牌名称 'pro_place': '韩国',//产地 'pro_purity': '99.7%',//规格 'pro_min': "215千克",//最小起订量 'pro_depot': '上海仓海仓储',//所在仓库 'pro_num': 3,//数量 'pro_img': '../../images/ucenter/testimg.jpg',//图片链接 'pro_price': 800//单价 } ] }, computed: {}, methods:{ }, mounted:function () { //为productList添加select（是否选中）字段，初始值为true var _this=this; //为productList添加select（是否选中）字段，初始值为true this.productList.map(function (item) { _this.$set(item, 'select', true); }) //要像上面这样写双向绑定才能起效，下面的写法是有问题的，双向绑定不起效的！ //this.productList.map(function (item) {item.select=true}) }}) 步骤一、点击增加和减少按钮（箭头指向地方），所属列的金额改变（红框地方）要先把列表的数据给铺出来。利用v-for指令。代码如下
![]()
{ {item.pro_name}}
品牌：{
{item.pro_brand}} 产地：{ {item.pro_place}}规格/纯度:{
{item.pro_purity}} 起定量：{ {item.pro_min}}配送仓储：{
{item.pro_depot}}￥{ {item.pro_price.toFixed(2)}}
￥{ {item.pro_price*item.pro_num}}.00
删除
这两个按钮的功能已经实现了，后面的金额也会发生变化！是不是感到很惊喜！其实这里没什么特别的，就是因为输入框利用v-model绑定了数量（pro_num），然后两个按钮分别添加了事件@click="item.pro_num--"和@click="item.pro_num++"。
步骤2
点击所属列选择按钮（箭头指向地方），总计的金额（红框地方）和已选产品的列数（蓝框地方）和全选（黄框地方）会改变（如果已经全选了，全选按钮自动变成全选，如果没有全选，全选按钮，自动取消全选）！
首先，选择与取消选择，在这里只有两个操作（其实只有一个：改变这条记录的select字段）。
其实就是等于添加了@click="item.select=!item.select" :class="{'check-true':item.select}"这里。点击这个，这条数据的select字段就取反（true->false或者false->true）。然后:class="{'check-true':item.select}"，就会根据这条数据的select字段进行判断，是否添加check-true类名，如果select字段为true，就添加类名
全选按钮：
这里用一个computed（计算属性）就好。
html
全选
js
computed: { isSelectAll:function(){ //如果productList中每一条数据的select都为true，返回true，否则返回false; return this.productList.every(function (val) { return val.select}); }} 就是计算属性中，定义的isSelectAll依赖productList。只要productList改变，isSelectAll的返回值就会改变，然后:class="{'check-true':isSelectAll}"根绝isSelectAll返回值是否添加'check-true'类名，显示对应的样式！
这里的多少件产品和总价，也是使用计算属性
html
￥{ {getTotal.totalPrice}}
{ {getTotal.totalNum}}件商品总计（不含运费）：
js
computed: { //检测是否全选 isSelectAll:function(){ //如果productList中每一条数据的select都为true，返回true，否则返回false; return this.productList.every(function (val) { return val.select}); }, //获取总价和产品总件数 getTotal:function(){ //获取productList中select为true的数据。 var _proList=this.productList.filter(function (val) { return val.select}),totalPrice=0; for(var i=0,len=_proList.length;i
步骤3
点击全选按钮（箭头指向部分），会自动的对产品进行全选或者取消全选，下面的总计也会发生改变
做到这一步，大家应该知道，全选或者取消全选，就是改变记录的select。但是怎么知道现在的列表有没有全选呢？这个很贱，不需要在操作函数（全选与取消全选函数）里面遍历，大家应该还记得第二步的计算属性isSelectAll（为true就是全选，否则不是全选），把这个传进操作函数就好，然后操作函数，根据参数，决定执行全选，还是取消全选操作。代码如下！
全选
js
methods: { //全选与取消全选 selectProduct:function(_isSelect){ //遍历productList，全部取反 for (var i = 0, len = this.productList.length; i < len; i++) { this.productList[i].select = !_isSelect; } }},
步骤4
点击删除产品，会删除已经选中的，全选按钮和下面的总计，都会变化！点击每条记录后面的删除，会删除当前的这条记录。全选按钮和下面的总计，也都会变化！
首先，点击删除产品，删除已经选中。这个大家知道了怎么做了！就是遍历productList，如果哪条记录的select为true，就删除。
然后，点击每条记录后面的删除，删除当前的这条记录。这个在html遍历productList的时候。顺便带上索引，然后把索引当成参数，传进操作函数，然后根据索引参数，删除productList的哪一条记录。即可实现！代码如下！html![]()
{ {item.pro_name}}
品牌：{
{item.pro_brand}} 产地：{ {item.pro_place}}规格/纯度:{
{item.pro_purity}} 起定量：{ {item.pro_min}}配送仓储：{
{item.pro_depot}}￥{ {item.pro_price.toFixed(2)}}
￥{ {item.pro_price*item.pro_num}}.00
删除...删除所选商品
js
//删除已经选中(select=true)的产品deleteProduct:function () { this.productList=this.productList.filter(function (item) { return !item.select})},//删除单条产品deleteOneProduct:function (index) { //根据索引删除productList的记录 this.productList.splice(index,1);}, 按钮图片：
完整代码
购物清单
全选商品数量单价(元)金额(元)操作
![]()
{ {item.pro_name}}
品牌：{ {item.pro_brand}} { {item.pro_place}}
规格/纯度:{ {item.pro_purity}} 起定量：{ {item.pro_min}}
配送仓储：{ {item.pro_depot}}
￥{ {item.pro_price.toFixed(2)}}.00
￥{ {item.pro_price*item.pro_num}}.00
删除
转自：https://segmentfault.com/a/1190000010801357#articleHeader6 （守候）