当前位置: 萬仟网 > IT编程>脚本编程>vue.js > vue实现简单的购物车算账系统

vue实现简单的购物车算账系统

2020年07月14日  | 萬仟网IT编程  | 我要评论

使用vue实现简单的购物车算账系统

<!DOCTYPE html><html lang="en"><head>    
<meta charset="UTF-8">   
 <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title></head><body>    <div id="box">    <input type="checkbox"  v-model='ischeckAll'  @change='checkAll'/><span>全选</span>    <ul >        <li v-for="data in datalist"><input type="checkbox" v-model="checkgrounp" :value="data" @change='hadleLiChange'/>            {{data}}             <button @click='delClick(data)'>del</button>            {{data.number}}            <button @click="data.number++">add</button>        </li>    </ul>      <br>    总金额:{{getsum()}}    </div>
    <script src="./lib/vue.js"></script>    <script>        var vm=new Vue({            el:"#box",            data:{                datalist:[                    {name:'商品1',number:1,price:10,id:1},                    {name:'商品2',number:1,price:20,id:2},                    {name:'商品3',number:1,price:30,id:3},                ],                checkgrounp:[],                pricesum:'',                ischeckAll:false            },            methods:{                getsum:function(){                    var pricesum=0;                                       for (var i in this.checkgrounp){                                               pricesum+=this.checkgrounp[i].number * this.checkgrounp[i].price                    }                    return pricesum                },                checkAll:function(){                    if(this.ischeckAll){                        this.checkgrounp=this.datalist                    }else{                        this.checkgrounp=[]                    }                },                delClick:function(data){                    data.number--                    if(data.number<=1){                        data.number=1                    }                },                hadleLiChange:function(){                    if(this.checkgrounp.length===this.datalist.length){                        this.ischeckAll=true                    }else{                        this.ischeckAll=false                    }                }            }
        })    </script></body></html>

在这里插入图片描述

本文地址:https://blog.csdn.net/wenxunliu/article/details/107290273

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
Copyright © 2017-2020  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com