文章 - 【VUE购物车，巩固小练习，加油】

VUE购物车，巩固小练习，加油

【VUE购物车，巩固小练习，加油】
符合小白的vue。加油
<最下有在线展示奥>

bootstrap+vue,js(vue-resource)完成购物车。实现了商品的选择，删除，全选（取消全选）。
以及商品的价格双向绑定和总价的实时计算。
巩固ajax获取模拟后台的json数据，并对数据进行操作处理。

html 代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <title>宋先森的购物车</title>

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

.projectname,
            .noticelist {
                margin-bottom: 70px;
            }
            /*商品列表 和 结账 上边距*/

.noticelist,
            .settle {
                border-top: 2px solid crimson;
            }

.notice {
                border: 2px solid #FFF;
            }
            /*鼠标经过图片触发*/

.notice:hover {
                border: 2px solid lightcoral;
            }
            /*商品数量设置*/

.inputNum {
                display: inline-block;
                width: 50px;
            }
            /*商品列表图片高贺和宽*/

.noticemin {
                width: 80px;
                height: 60px;
            }
            /*单价字体颜色*/

.zong_price {
                color: lightcoral;
            }
            /*结账 的字体大小*/

.accounts {
                font-size: 2.3em;
            }
            /*全选（取消全选）的字体大小*/

.btnchoose {
                font-size: 1.5em;
            }
            /*结账模块的外边距底部*/

.settle {
                margin-bottom: 70px;
            }
            /*结账按钮外边距*/

.btnaccounts {
                margin-bottom: 1em;
            }
        </style>
    </head>

<body>

<div id="notice_index" class="container">
            <div class="row clearfix projectname">
                
                <div class="col-md-12 column">
                    <h1 class="text-center">
                bootstrap+vue.js 购物车项目
            </h1>
                </div>
            </div>
            
            <div class="row clearfix noticelist">
                
                <div class="col-md-12 column">
                    <h4 class="text-left">
                单击选择您要购买的商品：
            </h4>
                </div>

<div class="col-md-4 column text-center" v-for="itemImg in noticeList">
                    <img :alt="itemImg.name" v-bind:src="itemImg.img" v-on:click="selectnotice(itemImg,1)" class="img-rounded notice" />
                </div>
            </div>
            
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <table class="table table-hover table-striped">
                        <thead>
                            <tr>
                                <th>
                                    编号
                                </th>
                                <th>
                                    商品信息
                                </th>
                                <th>
                                    商品单价
                                </th>
                                <th>
                                    商品数量
                                </th>
                                <th>
                                    总金额
                                </th>
                                <th>
                                    删除
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item,index) in noticeList" v-if="item.checked">
                                <td>
                                    {{index+1}}
                                </td>
                                <td>
                                    <span>
                            <img alt="item.name" v-bind:src="item.img" class="img-rounded noticemin"/>
                        </span>
                                    <span>
                            <strong>{{item.name}}</strong>
                            <p>赠品：</p>{{item.gift}}
                        </span>
                                </td>
                                <td>
                                    {{item.danprice|formatMoney}}
                                </td>
                                <td>
                                    <button v-on:click="changeMoney(item,-1)"><strong>-</strong></button>
                                    <input type="text" class="form-control inputNum" disabled="disabled" value="0" v-model="item.number" />
                                    <button v-on:click="changeMoney(item,1)"><strong>+</strong></button>
                                </td>
                                <td class="zong_price">
                                    {{item.zongprice=item.danprice*item.number|formatMoney}}
                                </td>
                                <td>
                                    <a id="modal-418866" href="#modal-container-418866" role="button" class="btn" data-toggle="modal" v-on:click="delconfirm(item)">删除</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    
                    <div class="row clearfix settle">
                        <div class="col-sm-6 column">
                            <a href="#" role="button" class="btn btnchoose" @click="selectall(1)">全选</a>
                            <a href="#" role="button" class="btn btnchoose" @click="selectall(-1)">取消全选</a>
                        </div>
                        <div class="col-sm-6 column text-center">
                            <span class="accounts">结账：</span>
                            <button type="button" class="btn btn-danger btn-lg btnaccounts" onclick="alert('小练习不能跳转！')">
                        {{total_price|formatMoney}}
                    </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <div class="modal fade" id="modal-container-418866" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                    <h4 class="modal-title" id="myModalLabel">
                                您要删除商品吗？
                            </h4>
                                </div>
                                <div class="modal-body text-center">
                                    您要删除商品吗？
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                            </button>
                                    <button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="selectnotice(delitem,-1)">删除
                            </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        
        <script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        
        <script src="//cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
        <script src="//cdn.bootcss.com/vue-resource/1.2.1/vue-resource.min.js"></script>
        <script type="text/javascript">
            /**
             * Created by Administrator on 2017/3/28.
             * 购物车首页的vue.js用于数据绑定
             */
            new Vue({
                el: "#notice_index",
                data: {
                    total_price: 0,
                    noticeList: [{
                            "checked": false,
                            "img": "http://sczgodofwar.top/zuopin/shoppingCart/img/201.png",
                            "name": "鼠标",
                            "danprice": 21,
                            "number": 0,
                            "zongprice": 0,
                            "gift": "鼠标垫"
                        },
                        {
                            "checked": false,
                            "img": "http://sczgodofwar.top/zuopin/shoppingCart/img/202.png",
                            "name": "键盘",
                            "danprice": 60,
                            "number": 0,
                            "zongprice": 0,
                            "gift": "鼠标垫，数据线"
                        },
                        {
                            "checked": false,
                            "img": "http://sczgodofwar.top/zuopin/shoppingCart/img/203.png",
                            "name": "U盘",
                            "danprice": 25,
                            "number": 0,
                            "zongprice": 0,
                            "gift": "数据线"
                        }
                    ],
                    delitem: ''
                },
                filters: {
                    formatMoney: function(value) {
                        return "￥" + value.toFixed(2);
                    }
                },
                mounted: function() {
                    this.$nextTick(function() {
                        this.noticedetail();
                    })
                },
                methods: {
                    //获取json文件的 数据
                    /* noticedetail: function () {
                         this.$http.get("json/noticeList.json").then(res => {
                             this.noticeList = res.body.noticelist;
                         })
                     },*/
                    //商品数量加减函数
                    changeMoney: function(notice, way) {
                        if(way > 0) {
                            notice.number++;
                            if(notice.number > 99) {
                                notice.number = 99;
                            }
                        } else {
                            notice.number--;
                            if(notice.number < 0) {
                                notice.number = 0;
                            }
                        }
                        this.totalPrice;
                    },
                    //商品选择
                    selectnotice: function(item, way) {
                        if(way > 0) {
                            item.checked = true;
                        } else {
                            item.checked = false;
                        }
                        this.totalPrice;
                    },
                    //商品是否要 全选中
                    selectall: function(way) {
                        this.noticeList.forEach(item => {
                            //IE浏览器 可能不支持箭头函数把 item=>改成function(item)就好。
                            if(way > 0) {
                                item.checked = true;
                            } else {
                                item.checked = false;
                            }
                        })
                        this.totalPrice;
                    },
                    //删除商品
                    delconfirm: function(item) {
                        this.delitem = item;
                    }
                },
                computed: {
                    //结账 总金额的实时计算
                    totalPrice: function() {
                        //IE浏览器 可能不支持箭头函数把 item=>改成function(item)就好。再加上 _this=this。
                        this.total_price = 0;
                        this.noticeList.forEach(item => {
                            if(item.checked == true) {
                                this.total_price += item.danprice * item.number;
                            }
                        })
                    }
                }
            });
        </script>
    </body>

</html>

购物车在线 url

前端学习交流，戳