<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>后盾人-购物车</title>

    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>

    <link href="https://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

<div class="container" id="app">

    <div class="row" >

        <template v-if="goods.length==0">

            <div class="panel panel-default">

                <div class="panel-body">

                    <p>购物车空空如也~~</p>

                </div>

            </div>

        </template>

        <template v-else>

            <div class="panel panel-default">

                <div class="panel-heading">

                    <h3 class="panel-title">购物车</h3>

                </div>

                <div class="panel-body">

                    <table class="table table-hover">

                        <thead>

                        <tr>

                            <th>

                                <input type="checkbox" @click="selecAll" v-model="allChecked">

                            </th>

                            <th>商品名称</th>

                            <th>商品单价</th>

                            <th>购买数量</th>

                            <th>小计</th>

                            <th>操作</th>

                        </tr>

                        </thead>

                        <tbody>

                        <tr v-for="(v,k) in goods">

                            <td>

                                <input type="checkbox" @click="select(v.id)" :checked="allSelectData.indexOf(v.id)!=-1">

                                <!--<input type="checkbox"  @click="select(v.id)" :checked="allSelectData.indexOf(v.id)!=-1">-->

                            </td>

                            <td>{{v.name}}</td>

                            <!--<td>{{v.price}}</td>-->

                            <td><input type="text" v-model="v.price"></td>

                            <td>

                                <button @click="reduce(v,k)">-</button>

                                <input type="text" v-model="v.num" style="width: 30px;text-align: center">

                                <button @click="plus(k)">+</button>

                            </td>

                            <td>{{v.price*v.num}}</td>

                            <td>

                                <div class="btn-group btn-group-xs">

                                    <!--删除方法一-->

                                    <!--<button @click="del(k)" type="button" class="btn btn-danger">删除</button>-->

                                    <!--删除方法二-->

                                    <button @click="goods.splice(k,1)" type="button" class="btn btn-danger">删除</button>

                                </div>

                            </td>

                        </tr>

                        </tbody>

                    </table>

                </div>

                <div class="panel-footer" style="text-align: right">

                    共计 <span>{{totalPrice}}</span> 元

                </div>

            </div>

        </template>

    </div>

</div>

<script>

    var data = [1,2,6,7,8,9];

    //检测元素是否在数组中

    // console.log(data.indexOf(1));

    new Vue({

        el:'#app',

        data:{

            //购物车数据

            goods:[

                {id:1,name:'联想 K5 Note 4GB+64GB 6英寸全面屏双摄手机 全网通 移动4G+ 双卡双待 极地黑',price:999,num:1},

                {id:2,name:'一加手机6 8GB+128GB 亮瓷黑 全面屏双摄游戏手机 全网通4G 双卡双待 骁龙845',price:3599,num:1},

                {id:3,name:'小米MIX2 全面屏游戏手机 6GB+64GB 黑色 全网通4G手机 双卡双待 5.99"大屏，',price:2599,num:1},

                {id:4,name:'OPPO R15 全面屏双摄拍照手机 4G+128G 幻色粉 全网通 移动联通电信',price:2699,num:1},

                {id:5,name:'Apple MacBook Air 13.3英寸笔记本电脑 银色(2017款Core i5 处理器/8GB内',price:6588,num:1},

                {id:6,name:'Apple MacBook Pro 15.4英寸笔记本电脑 银色(Core i7 处理器/16GB内存/256GB ',price:12277,num:1},

                {id:7,name:'Apple MacBook Pro 15.4英寸笔记本电脑 银色（2017款Multi-Touch Bar/Core ',price:17588,num:3},

                {id:8,name:'Apple iPhone X (A1903) 64GB 深空灰色 移动联通4G手机 【支持移动联通4G】',price:6999,num:1},

                {id:9,name:'Apple 苹果 iPhone X手机 银色 全网通64G 【6.5白条全场三期免息】下单送透明壳',price:7498,num:1},

                {id:10,name:'Apple 苹果X iPhoneX 全面屏手机 银色 全网通 256G 【京仓配送 时效快捷 】入仓',price:8738,num:1},

            ],

            //控制全选

            allChecked:false,

            //商品数据选中

            allSelectData : [],

//                allSelectData2 : [],

        },

        mounted(){

            //控制加载完页面全部选中

            this.goods.forEach((v,k)=>{

                this.allSelectData.push(v.id);

            })

            this.allChecked=true;

        },

        methods:{

            //购物车数量增加

            plus(k){

                this.goods[k].num++;

            },

            //购物车数量减少

            reduce(v,k){

                //方法一

//                this.goods[k].num--;

//                if(this.goods[k].num==0){

//                    this.goods.splice(k,1);

//                }

               //方法二:

                v.num--;

                if(v.num==0){

                   this.goods.splice(k,1);

                }

            },

            //购物车删除

            del(k){

                this.goods.splice(k,1);

            },

            //单击全选按钮

            selecAll(){

//                    console.log(event.currentTarget.checked);

                console.log(!this.allChecked);

//                    if(!event.currentTarget.checked){

                if(this.allChecked){

                    //取消全选

                    this.allSelectData = [];

                }else{

                    //全选

                    this.goods.forEach((v,k)=>{

                        this.allSelectData.push(v.id);

                    })

                }

            },

            select(id){

                //知道当前点击商品对应的商品编号是否在allSelectData数组中

                var res = this.allSelectData.indexOf(id);

                res == -1 ? this.allSelectData.push(id) : this.allSelectData.splice(res,1);

                this.allChecked = this.goods.length == this.allSelectData.length;

            }

        },

        computed:{

            totalPrice(){

                var total=0;

                this.goods.forEach((v,k)=>{

                    var res = this.allSelectData.indexOf(v.id);

                    //计算总价只计算在allSelectData商品

                    if(res != -1){

                        total += v.num * v.price;

                    }

                })

                return total;

            }

        }

    })

</script>

</body>

</html>

效果:

vue购物车的实现的更多相关文章

  1. Vue购物车实例

    <div class="buyCarBox" id="buyCarBox" v-cloak> <div class="haveClo ...

  2. vue 购物车练习

    本人看了vue官网上的教程后,感觉对vue的依稀有点了解,决定动手练习个小功能项目,就找了购物车本项目.原文链接:http://blog.csdn.net/take_dream_as_horse/ar ...

  3. vue购物车和地址选配（三）

    参考资料:vue.js官网 项目演示: 项目源代码: 核心代码及踩坑 删除: new Vue({ el:'#app', data:{ productlist:[], totalMoney:0, che ...

  4. vue购物车功能源码

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...

  5. Vue购物车

    index.html <!DOCTYPE html><html>    <head>        <meta charset="utf-8&quo ...

  6. VUE购物车示例

    代码下载地址:https://github.com/MengFangui/VueShoppingCart 1.index.html <!DOCTYPE html> <html lan ...

  7. vue购物车动画效果

    使用动画的三个函数 v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter=&q ...

  8. 第八十三篇：Vue购物车(四) 总价计算

    好家伙, 1.总价计算 来了,又先是一波分析: 我们用一个计算属性amt 我们把item中被勾选的项用一个过滤器过滤器来 然后用一个循环相加,把商品的价格乘以商品的数量, 把这个总值返回出去, 然后组 ...

  9. 第八十二篇：Vue购物车(三) 实现全选功能

    好家伙, 继续完善购物车相应功能 1.如何实现全选和反全选 1.1.全选框的状态显示(父传子) 来一波合理分析: 在页面中,有三个商品中 三个商品中的第二个未选择, 我么使用一个计算属性(fullSt ...

随机推荐

  1. C. Jury Marks 思维题

    http://codeforces.com/contest/831/problem/C 做的时候想不到,来了个暴力. 对于每个b[i],枚举每一个a[i],就有1个可能的情况. 然后用vector存起 ...

  2. HDU 5763 Another Meaning dp+字符串hash || DP+KMP

    题意:给定一个句子str,和一个单词sub,这个单词sub可以翻译成两种不同的意思,问这个句子一共能翻译成多少种不能的意思 例如:str:hehehe   sub:hehe 那么,有**he.he** ...

  3. 【密码学】SSL双向认证以及证书的制作和使用

    客户端认证服务器: 正规的做法是:到国际知名的证书颁发机构,如VeriSign申请一本服务器证书,比如支付宝的首页,点击小锁的图标,可以看到支付宝是通过VeriSign认证颁发的服务器证书: 我们用的 ...

  4. JS文本框输入限制

    1上面的文本框只能输入数字代码(小数点也不能输入): CODE: <input onkeyup="this.value=this.value.replace(/\D/g,'')&quo ...

  5. NC57访问报错:java.sql.SQLException: Io 异常: Got minus one from a read call

    一.报错信息 1.  前端登录界面 2.  后台应用日志 报错信息一致为: $$callid= $$thread=[Service Monitor and Runtime Enroment] $$ho ...

  6. SpringBoot JUnit4的断言和注解

    Junit4的断言常用方法: assertArrayEquals( new Object[]{ studentService.likeName("小明2").size() > ...

  7. C＃对话框-打开和保存对话框（转）

    //打开文件            OpenFileDialog openFileDialog = new OpenFileDialog();            openFileDialog.In ...

  8. 《Python高效开发实战》实战演练——基本视图3

    在完成Django项目和应用的建立后,即可以开始编写网站应用代码,这里通过为注册页面显示一个欢迎标题,来演示Django的路由映射功能. 1)首先在djangosite/app/views.py中建立 ...

  9. Navicat for Oracle设置唯一性和递增序列

    [数据库] Navicat for Oracle基本用法图文介绍 一. 设置唯一性 参考文章:Oracle之唯一性约束(UNIQUE Constraint)用法详解唯一性约束英文是Unique Con ...

  10. instanceof 关键字

    boolean = Object(类引用名) instanceof  Class(类名) 作用:判断符号左边的引用指向的对象是否是右边这个类的对象: