VUE中购物车怎么做

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="box">
        全选
        <input type="checkbox" v-model="allcheck" @change="checkChange()">
        <ul>
            <li v-for="data in dataList">
                <input type="checkbox" v-model="mylist" :value="data" @change="lichange()">
                {{data}}
                <button @click="prev(data)">-</button>
                {{data.number}}
                <button @click="data.number++">+</button>
            </li>
        </ul>
        {{mylist}}
        <p>总金额计算{{getSum()}}</p>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
    el:"#box",
    data:{
        mylist:[],
        allcheck:false,
        dataList:[
            {
                name:"商品1",
                price:10,
                number:3,
                id:'1'
            },
            {
                name:"商品2",
                price:14,
                number:2,
                id:'2'
            },
            {
                name:"商品3",
                price:20,
                number:5,
                id:'3'
            },
            {
                name:"商品4",
                price:7,
                number:3,
                id:'4'
            },
        ]
    },
    methods:{
        // 计算总价
        getSum(){
            var sum = 0
            for(var i in this.mylist){
               sum+=this.mylist[i].price*this.mylist[i].number
            }
            return sum
        },
        // 全选和全不选
        checkChange(){
         if(this.allcheck==true){
            this.mylist=this.dataList
         }else{
            this.mylist=[]   
         }
        },
        // li改变全选
        lichange(){
            if(this.mylist.length==this.dataList.length){
                this.allcheck=true
            }else{
                this.allcheck=false
            }
        },
        // 数量-
        prev(data){
            data.number--;
          if(data.number<=1){
            data.number=1
          }
        }
    }
})
</script>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。