用Vue实现的购物车功能

发布于：2022-04-24 15:51:21  栏目：技术文档

CSS代码:同前篇

html代码:

<div class="box">
  <h3>我的购物车(Vue实现）</h3>
  <div class="selectAll">
     <input type="checkbox" class="check-all" name="check-all" @click="checkAll()" :checked="chka"  />
     <label for="check-all">全选</label>
  </div>
  <ul class="list">
     <li><span>选择</span><span>品名</span><span>数量</span><span>单价</span><span>金额</span></li>
     <template v-for="(item,index) of list">
        <li>
           <input type="checkbox" @click="checkThis(index)" :checked="item.check" />
           <span class="content">手机</span>
           <input type="number" v-model="item.num" min="1" class="num" />
           <span class="price">{{item.price}}</span>
           <span class="amount">{{item.price*item.num}}</span>
        </li>
      </template>
      <li>
         <span>总计:</span>
         <span class="total-num">{{totalNum}}</span>
         <span class="total-amount">{{totalAmount}}</span>
      </li>
   </ul>
   <button class="account">结算</button>
</div>

javascript代码:

const app = Vue.createApp({
    data() {
        return {
           chka:true,
           list:[{check:true,num:1,price:100},{check:true,num:2,price:200},{check:true,num:3,price:300}],
        }
    },
    computed: {
        totalNum(){
            return this.list.filter(item=>item.check).reduce((acc,item)=>acc+item.num,0);
        },
        totalAmount(){
            return this.list.filter(item=>item.check).reduce((acc,item)=>acc+item.num*item.price,0);
        }
    },
    methods: {
        checkAll(){
            this.chka=!this.chka;
            this.list.forEach(item=>item.check=this.chka);
        },
        checkThis(index){
            this.list[index].check=!this.list[index].check;
            this.chka=this.list.every(item=>item.check==true);
         }
    },
}).mount('.box')

购物车图示：

相关推荐