正文

Vue实现简单购物车功能

譬如朝露 V管理员/ / 0 评论/ 953阅读
03 16
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
            <script src="../vue.js"></script>
    </head>
    <style>
        .color1{
            color: red;
        }
        .color2{
            color: green;
        }
    </style>
    <body>
        <div id="app">
            <h2>购物车</h2>
            <table>
                <tr>
                    <th><label><input type="checkbox"   @click="check_all"/>全选</label></th>
<th>商品名称</th>
<th>商品价格</th>
<th>数量</th>
<th>操作</th>
                </tr>
                <tr v-for="(item,index) in cart_list">
                    <td><input type="checkbox" :value="item" v-model="goos_list"></td>
                    <td>{{item.goods_name}}</td>
                    <td>{{item.goods_price}}</td>
                    <td><button @click="add(item)">+</button>{{item.num}}<button @click="reduce(item)">-</button></td>
                    <td><a href="javascript:;">删除</a></td>
                </tr>
            </table>
            <div v-if="goos_list.length<=0">
                <p>未选择商品</p>
            </div>
            <div v-else>
                <p>已选{{taotal}}件商品</p>
                <p>合计{{toatlPrice}}元</p>
            </div>
            {{goos_list}}
        </div>
        <script>
             var array = [1,2,3,4,5,6,7];
            var  cart_list= [{
            　　goods_name: '小米6',
            　　goods_price: '1699',
            　　num: '2',
            },{
               goods_name: '红米3',
               goods_price: '699',
               num: '1',
            },{
               goods_name: '小米8',
               goods_price: '2899',
               num: '1',
            }]
            var app=new Vue({
                el:'#app',
                data:{
                    title:'hello vue.js',
                    cart_list,
                    goos_list:[]
                },
                methods:{
                    //累加
                    add(item){
                        item.num++;
                    },
                    //累减
                    reduce(item){
                        if(item.num>0){
                            item.num--;
                        }else{
                            item.num=0;
                        }
                    },
                    //全选
                    check_all(){
                        
                        if(this.goos_list.length>0){
                            this.goos_list=[]
                        }else{
                            this.cart_list.forEach(item=>{
                                this.goos_list.push(item)
                            })
                        }
                    }
                },
                computed:{
                    //商品总个数
                    taotal(){
                        let nums=0;
                        this.goos_list.forEach((item,index)=>{
                            nums+=Number(item.num);
                        })
                        return nums;
                    },
                    //商品总价
                    toatlPrice(){
                        let price=0;
                        this.goos_list.forEach(itme=>{
                            price+=Number(itme.num) * Number(itme.goods_price);
                        })
                        return price;
                    }
                }
            })
        </script>
    </body>
</html>


文章版权声明：除非注明，否则均为 譬如朝露_策温技术开发工作室博客原创文章，转载或复制请以超链接形式并注明出处。