VUE3学习，购物车结算练习

发布于：2021-12-09 10:20:29  栏目：技术文档

购物车效果如下

<template>
<div>
<table>
  <caption>购物车</caption>
  <tr>
   <th>全选 <input type="checkbox" @change="checkAll()" v-model="myChecked"></th>
   <th>编号</th>
   <th>商品名称</th>
   <th>价格</th>
   <th>购物数量</th>
   <th>操作</th>
  </tr>
  <tr v-for="(value,key) in goods" key="key">
    <td style="text-align: center"><input type="checkbox" v-model="value.checkbox" @change="check()"></td>
    <td>{{value.id}}</td>
    <td>{{value.name}}</td>
    <td>￥：{{value.price}}</td>
    <td class="d-flex just-btw al-cent">
<!--      <div class="div-fang div-jian" @click="value.count&#45;&#45;" :disabled="value.count<=1">-</div>-->
      <button class="div-fang div-jian" @click="value.count--" :disabled="value.count<=0">-</button>
      <input type="text" size="1" class="border-none out-line" style="width: 18px" :value="value.count" :v-model="value.count">
<!--      <div class="div-fang div-add" @click="value.count++">+</div>-->
      <button class="div-fang div-add" @click="value.count++">+</button>
    </td>
    <td style="text-align: center"><a href="" @click.prevent="del(key)">删除</a> </td>
  </tr>
  <tr>
    <td colspan="3" style="text-align: right">合计:</td>
    <td colspan="3">{{totalPrice}}</td>
  </tr>
</table>
</div>
  <div style="margin-top: 20px ;border:1px solid #dbdbdb;width: 300px;height: 200px">
    <p style="font-size: 18px;text-align: center;font-weight: bold">添加商品</p>
    <span>商品名称：</span><input type="text" v-model="goodsName"><br>
    <span>商品价格：</span><input type="text" v-model="goodsPrice"><br>
    <span>库存数量：</span><input type="text"><br>
    <button style="margin: 20px;border: 1px solid #666" @click="addGoods()" >添加</button>
  </div>
</template>
<script>
export default {
  name:"App",
  data(){
    return{
    goods:[
      {id:1, checkbox:false, name:'《细说PHP》', price:10, count:0},
      {id:2, checkbox:false, name:'《细说网页制作》', price:10, count:0},
      {id:3, checkbox:false, name:'《细说JavaScript语言》', price:10, count:0},
      {id:4, checkbox:false, name:'《细说DOM和BOM》', price:10, count:0},
      {id:5, checkbox:false, name:'《细说Ajax与jQuery》', price:10, count:0},
      {id:6, checkbox:false, name:'《细说HTML5高级API》', price:10, count:0}
          ],
      myChecked:false,
      goodsName:"",
      goodsPrice:0
    }
    },
    computed:{
      totalPrice:{
        get(){
          let sum=0;
         for (let i=0;i<this.goods.length;i++){
            if (this.goods[i].checkbox==true){
              sum +=this.goods[i].price*this.goods[i].count;
            }
         }
          return sum
        }
      }
    },
methods:{
  check(){
    // for (let i=0;i<this.goods.length;i++){
    //   if (this.goods[i].checkbox==true){
    //     this.sum=this.goods.reduce((s,n)=>s+n)
    //     return this.sum
    //   }
    // }
  },
  checkAll(){
    for (let i=0;i<this.goods.length;i++){
      this.goods[i].checkbox=this.myChecked
    }
  }
  ,
  minus(){
  },
  addGoods(){
      this.goods.push({id:this.goods.length+1,name: this.goodsName,price:this.goodsPrice,checkbox: false,count: 0})
  },
  del(key){
    this.goods.splice(key,1)
  }
}
}
</script>
<style scoped>
*{
  margin: 0px;
  padding: 0px;
}
 table,th,td,tr{
   border-collapse: collapse;
   border: 1px solid #333;
 }
 tr{
   height: 25px;
 }
 td,th{
   width: 200px;
   height: 22px;
 }
tr>td:first-child,tr>th:first-child{
  width: 60px;
}
 tr>td:nth-child(2),tr>th:nth-child(2){
   width: 80px;
   text-align: center;
 }
 tr>td:nth-child(4),tr>th:nth-child(4){
   width: 120px;
 }
 tr>td:nth-child(5),tr>th:nth-child(5){
   width: 100px;
   text-align: center;
 }
 tr>td:last-child,tr>th:last-child{
   width: 80px;
 }
 .d-flex{
   display: flex;
   position: relative;
 }
 .just-btw{
   justify-content: space-around;
 }
 .al-cent{
   align-items: center;
 }
 .div-fang{
   border: 1px solid #666;
   width: 18px;
   height: 18px;
   position: absolute;
   cursor: pointer;
   text-align: center;
 }
 .div-jian{
   left: 18px;
 }
 .div-add{
   right: 18px;
 }
 .border-none{
   border: none;
   /*border-bottom: 1px solid #333;*/
 }
 .out-line{
   outline: none;
 }
 .pad-l-r-10{
   padding-left: 18px;
   padding-right: 18px;
 }
</style>

相关推荐