vue购物车-0920

最新推荐文章于 2024-06-04 21:30:52 发布

原创最新推荐文章于 2024-06-04 21:30:52 发布 · 229 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #购物车

Vue 同时被 2 个专栏收录

27 篇文章

订阅专栏

axios

4 篇文章

订阅专栏

注意：

1、浮点四舍五入问题。moneyCount.toFixed(2);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车-Vue</title>
    <script>

    </script>

</head>
<body>

  <div id="div1" style="border: 1px">

      <fieldset>
          <legend>{{userName}}的购物车</legend>

       <table border="1">
          <thead>
            <tr>
                <th>行号</th>
                <th>编码</th>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>操作</th>
            </tr>

          </thead>

          <tbody>
            <tr v-for="(goods,index) in goodsWillPay">
                <td>{{index+1}}</td>
                <td>{{goods.goodsNo}}</td>
                <td>{{goods.goodsName}}</td>
                <td>{{goods.goodsPrice}}</td>
                <td><button @click="changeRowQuantity(index,'-')">-</button>
                    {{goods.goodsQuantity}}
                    <button @click="changeRowQuantity(index,'+')">+</button>
                </td>
                <td :class="'text-center'"><button @click="DeleteGoodsRow(index)">移除</button>
            </td>
              
            </tr>
          </tbody>
       </table>
       <label>合计金额：</label><span>{{countGoodsMoney()}}</span>

      </fieldset>

  </div>





</body>
<script src="js/vue.js"></script>
<script>
    var goodsList={
        userName:"“杨胜利”",
        goodsWillPay:[{goodsNo:"sp001",goodsName:"iPhone X",goodsPrice:7999.99,goodsQuantity:1},
                        {goodsNo:"sp008",goodsName:"荣耀 10", goodsPrice:2399.00,goodsQuantity:1},
                        {goodsNo:"sp009",goodsName:"华为 P20",goodsPrice:3399.00,goodsQuantity:1},
                        {goodsNo:"sp012",goodsName:"小米 8",  goodsPrice:3999.00,goodsQuantity:1}]
    };

    var v1=  new Vue({
        el:'#div1',
        data:goodsList,
        methods:{
            // 统计购物车中的商品金额之和
            countGoodsMoney:function(){
                let moneyCount=0;
                for (var i=0;i<this.goodsWillPay.length;i++){
                    console.log((i+1) +"行 moneyCount:"+ this.goodsWillPay[i].goodsPrice * this.goodsWillPay[i].goodsQuantity);
                    moneyCount=moneyCount + this.goodsWillPay[i].goodsPrice* this.goodsWillPay[i].goodsQuantity;
                    moneyCount.toFixed(2);
                }
                return  moneyCount.toFixed(2);
            },

            // 修改指定商品行的数量：加1或减1
            changeRowQuantity:function (index,addOrSubtraction) {
                console.log("index:"+ index);
                console.log("addOrSubtraction:"+ addOrSubtraction);
                if (addOrSubtraction=="-" ){
                    if (this.goodsWillPay[index].goodsQuantity>0){
                        this.goodsWillPay[index].goodsQuantity = this.goodsWillPay[index].goodsQuantity -1;
                    }
                }

                if (addOrSubtraction=="+" ){
                        this.goodsWillPay[index].goodsQuantity = this.goodsWillPay[index].goodsQuantity + 1;
                }
            },


            //从购物车，移除一行商品
            DeleteGoodsRow:function (index) {
                 this.goodsWillPay.splice(index,1);
            },

        }
    });



</script>


</html>