vue 购物车功能 小案例

最终效果：

 

shopcar.vue所有代码：

<template>
  <div id="app">
    <div class="container">
      <div class="row">
        <div class="col-lg-1 col-md-1"  @change="checked">
          <!-- 用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定 -->
          <input type="checkbox" id="none" value="false" ref="checkBox_"  >
          <label for="none">全选</label>
        </div>
        <div class="col-lg-1 col-md-1">序号</div>
        <div class="col-lg-3 col-md-3">图片</div>
        <div class="col-lg-3 col-md-3">价格</div>
        <div class="col-lg-2 col-md-2">数量</div>
        <div class="col-lg-2 col-md-2">金额</div>
      </div>
      <!-- v-for循环商品列表 -->
      <div class="row" v-for="(good,index) in data_">
        <div class="col-lg-1 col-md-1" @change="check_isAll">
          <input type="checkbox" v-model="good.checked">
        </div>
        <div class="col-lg-1 col-md-1">{{index+1}}</div>
        <div class="col-lg-3 col-md-3">
          <img :src="good.img" alt="">
        </div>
        <div class="col-lg-3 col-md-3">{{good.price}}</div>
        <div class="col-lg-2 col-md-2">
          <span @click="good.num<1?0:good.num--">-</span>
          <span class="num" contenteditable="true">{{good.num}}</span>
          <span @click="good.num++">+</span>
        </div>
        <!-- 计算出当前选项总金额 -->
        <div class="col-lg-2 col-md-2">{{good.price * good.num}}</div>
      </div>
      <div class="row">
        <div class="col-lg-6 col-md-6"></div>
        <!-- 使用calc()进行选择件数和进行总价的计算 -->
        <div class="col-lg-3 col-md-3">
          共选择了<span>{{calc().cnt}}</span>件商品
        </div>
        <div class="col-lg-3 col-md-3">
          总计<span>{{calc().totalPrice}}</span>
        </div>
      </div>
    </div>
  </div>

</template>
<script>
  // $(function () {
  //   alert(123);
  // });
  export default {
      name: "shopcar3",
      data() {
        return {
          data_: [{
            id: 1,
            name: '小吃1',
            img: 'img/0.jpg',
            price: '26.00',
            num: 0,
            checked: false
          }, {
            id: 2,
            name: '小吃2',
            img: 'img/1.jpg',
            price: '25.00',
            num: 0,
            checked: false
          }, {
            id: 3,
            name: '小吃3',
            img: 'img/2.jpg',
            price: '20.00',
            num: 0,
            checked: false
          }, {
            id: 4,
            name: '小吃4',
            img: 'img/3.jpg',
            price: '18.00',
            num: 0,
            checked: false
          }, {
            id: 5,
            name: '小吃5',
            img: 'img/4.jpg',
            price: '16.00',
            num: 1,
            checked: false
          }]
        }
      },
      mounted(){
        var goodObj=localStorage.goods?JSON.parse(localStorage.goods):goods;
        this.check_isAll();
      },
      methods:{
        update:function(){
          localStorage.setItem('goods',JSON.stringify(this.$data));//更新函数，在每次有变化都需要调用并修改localstroage
        },
        // 判断是否页面所有单选按钮是不是被选中，如果均选中则全选按钮默认被选中
        check_isAll(){
          var check_el=document.getElementById('none');
          if(this.isAllselect()){
            check_el.checked=true;
          }else{
            check_el.checked=false;
          }
          this.update();
        },
        //全选
        checked(){
          // 获取当前全选按钮状态，并给单选按钮赋相对应的值
          var el=event.target;
          var check_=el.checked;
          // debugger;
          for(var i = 0;i < this.data_.length;i++){
            this.data_[i].checked=check_;
          }
          this.update();
        }
        ,
        // 使用数组every方法判断是否全选中单选按钮
        isAllselect:function(){
          return this.data_.every(function(item){
            // console.log(index);
            return item.checked==true;
          })
        },
        // 计算相关的总数量个总金额
        calc:function(){
          var pro=this.data_.filter(function(item){
            return item.checked==true;
          });
          var totalPrice=0;
          for(var i = 0; i < pro.length;i++){
            totalPrice+=pro[i].price*pro[i].num;
          }
          return {cnt:pro.length,totalPrice:totalPrice}
        }
      }

    }
</script>

<style scoped>
  .container{
    text-align: center;
  }
  .container .row{
    /*height: 100px;*/
    border: 1px solid #eee;
  }
  img{
    width: 100px;
    height: 100px;
    vertical-align: middle;
  }
  span{
    width: 20px;
    height: 20px;
    border: 1px solid #999;
    background:#eee;
    display:inline-block;
  }
  .num{
    background:transparent;
    border-left: none;
    border-right: none;
  }
</style>