vue.js实现购物车的简单计件

//html部分
<div id="app">
                <div class="goods">
                    <div>小兔子</div>
                    <p>单价:{{price}}</p>
                    <button @click="handleReducer">-</button>
                    <input type="text" v-model.number="num">
                    <button @click="handleAdd">+</button>
                    <p>小计:{{sum}}</p>
                    <p>运费:{{freight}}</p>
                    <p>应付:{{pay}}</p>
                </div>
            </div>
	//js脚本部分
	<script src="vue.js"></script>
<script>
   /*简单购物车:
   数量 :num   价格：price  小计:sum  运费：freght  10  超过299 包邮
   应付: pay
   */ 
    new Vue({
        el:"#app",//放唯一id对象的
        data:{//放数据
            price:39.8,
            num:1,
            freight:10
        },
        methods: {//专门放函数的
            handleReducer(){//减
                if(this.num <=1){//等于或小于1 让它等于1
                    this.num = 1;
                }else{//大于1 的时候
                    this.num--;
                }
            },
            handleAdd(){
                this.num++;
            }
        },
        computed:{//专门计算的
            sum(){
                return this.num*(this.price*10)/10;//解决小数点0.1+0.2 ！= 0.3 的问题  先乘上10位整数 运算结果在除以10
            },
            pay(){
                let countPrice = this.num*(this.price*10)/10;
                if(countPrice >= 299){
                    return countPrice;//包邮
                }else{
                    return countPrice+this.freight;//不包邮费
                }
            }
        }
    })


</script>