vue实现简单购物车页面部分功能

为实现功能为第一，布局引用框架，不足支出请指正

一、body部分的代码：

<div id="app">

    <header class="bar bar-header bar-assertive">

        <span class="title">购物车</span>

    </header>

    <header class="bar bar-subheader bar-dark">

        <span class="title">总件数: {{totalNum}} 总价格: {{totalPrice}}</span>

    </header>

    <section class="content scroll-content overflow-scroll has-header has-footer has-subheader">

        <ul class="list ">

            <li class="item item-thumbnail-left" v-for="(n,index) in cartList">

                <img :src="n.pic">

                <h2>{{n.title}}</h2>

                <p>单价:{{n.price}}</p>

                <p class="box">数量:

                    <span @click="add(index)">+</span>

                    <span><input type="text" v-model="n.qal"></span>

                    <span @click="sub(index)">-</span>

                </p>

            </li>

        </ul>

    </section>

    <footer class="tabs tabs-icon-top">

        <div class="tab-item">

            <i class="icon ion-ios-home"></i>

            首页

        </div>

        <div class="tab-item">

            <i class="icon ion-ios-home"></i>

            首页

        </div>

        <div class="tab-item">

            <i class="icon ion-ios-home"></i>

            首页

        </div>

        <div class="tab-item has-badge">

            <span class="badge badge-assertive">{{totalNum}}</span>

            <i class="icon ion-ios-home"></i>

            购物车

        </div>

        <div class="tab-item">

            <i class="icon ion-ios-home"></i>

            首页

        </div>

    </footer>

</div>

二、vue部分代码

 (function () {

  //实例化vue

        var vm = new Vue({

            el:"#app",

            //抽取方法和属性

            data:{

                totalNum:0,

                totalPrice:0,

                cartList:[]

            },

            methods:{

            //当点击加号时

                add:function(idx){

                     this.cartList[idx].qal++;

                     this.counter(this.cartList);

                },

                //当点击减号时

                sub:function (idx) {

                    if(this.cartList[idx].qal <=1){

                        this.cartList[idx].qal =1;

                    }else{

                        this.cartList[idx].qal--

                        this.counter(this.cartList);

                    }

                },

                initData:function () {

                //新的ajax请求方式 (cart.json文件中放入商品)

                   fetch("assets/cart.json").then((response)=>{

                       response.json().then(data=>{

                            this.counter(data);

                            this.cartList = data;

                       })

                   })

                },

                counter:function(data){

                    this.totalNum=0;

                    this.totalPrice =0;

                    data.forEach((v,index)=>{

                        this.totalNum += v.qal;

                        this.totalPrice += v.qal * v.price;

                    })

                }

            },

            //实例化开始

            beforeCreate:function () {     

            },

            //实例化完成

            created:function () {

                this.initData();

            },

            //监听总价 如大于5000 送1000

            watch:{

                "totalPrice":function(n,o){

                    if(n >= 5000){

                        console.log("满5000,送1000 cent");

                    }

                }

            }

        })

    })()