vue-vant购物车功能

vue-vant购物车功能
效果图：

功能要求：

安装vue-cli以及用到的bootstrap以及vant，并且引入样式等
难点在于动态勾选按钮以及计算数据，这里都用computed进行计算
代码：

<template>  <div id="app">    <van-nav-bar title="购物车"/>     <van-row>        <van-col span="4">          全选：<input type="checkbox" v-model="checkAll">        </van-col>        <van-col span="5">          商品名称        </van-col>        <van-col span="5">          单价        </van-col>         <van-col span="5">          数量        </van-col>         <van-col span="5">          操作        </van-col>     </van-row>     <van-row v-for="(item,index) in list" :key="index">         <van-col span="4">          <input type="checkbox" v-model="item.isSelect">        </van-col>        <van-col span="5">          {{item.name}}        </van-col>        <van-col span="5">          {{item.price}}        </van-col>         <van-col span="5">          <van-button type="primary" size="small" @click="item.num<=1?1:item.num--" class="aa">-</van-button>              <input type="text" v-model="item.num" class="bb">          <van-button type="primary" size="small" @click="item.num++" class="cc">+</van-button>        </van-col>         <van-col span="5">          <van-button type="danger" @click="del(index)">删除</van-button>        </van-col>     </van-row>    <!-- 底部提交订单 -->    <van-submit-bar      :price="sum*100"      button-text="提交订单"    />    {{sum}}  </div></template>
<script>  export default{    data(){      return {        // checkAll:true,        list:[          {            isSelect:true,            name:"口罩",            price:10,            num:1          },          {            isSelect:true,            name:"手套",            price:20,            num:1          },        ],      }    },    methods:{      del(index){        this.list.splice(index,1)      }    },    computed:{      checkAll:{        //计算属性有两个固定方法        get(){  ///第一次页面加载过程中就调用get方法，获取当前应该得到的状态 getset用于设置checkAll          //every  检测每个是否符合条件          console.log("get")          return this.list.every(item=>{            return item.isSelect;//如果所有元素都通过检测返回 true，否则返回 false。 只要选项中有个参数为false得返回false          })        },        set(value){          console.log(value)          //set不需要return  遍历元素值  修改属性            this.list.forEach(item=>{            return item.isSelect = value;          })        }      },      sum(){        //total  计算做后返回结果值        //item  数组中对象        //reduce()进行计算        return this.list.reduce((total,item)=>{          //计算选中的          //如果商品没有选中，必须返回总值          if(!item.isSelect)return total;          return total+parseInt(item.price*item.num);             },0);//这个0是指定默认第一个total是0      }    }  }</script>
<style lang="scss">.aa,.bb,.cc{  width:30px;  float: left;}</style>

template：

script:

style: