如何使用vue实现一个简易的购物车

先看效果图直接上代码<!DOCTYPE html><html><head><meta charset="utf-8"><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.0.2/css/bootstrap.min.css"/></head><body><div id="app" cl

zbwroom

7622人浏览 · 2017-08-23 10:37:53

zbwroom · 2017-08-23 10:37:53 发布

先看效果图
这里写图片描述

直接上代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.0.2/css/bootstrap.min.css"/>
</head>
<body>

    <div id="app" class="container">
        <table class="table">
            <thead>
                <tr>
                    <th>产品编号</th>
                    <th>产品名字</th>
                    <th>购买数量</th>
                    <th>产品单价</th>
                    <th>产品总价</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item , index) in message">
                    <td @click="jia(index)">{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>
                        <button type="button" class="btn tn-primary" @click="subtract(index)">-</button>
                        <input type="text" v-model="item.quantity">
                        <button type="button" class="btn tn-primary" @click="add(index)">+</button>
                    </td>
                    <td>{{item.price | filtermoney}}</td>
                    <!--<td>{{arr[index].one}}</td>-->
                    <td>{{item.price*item.quantity | filtermoney}}</td>
                    <td>
                        <button type="button" class="btn btn-danger" @click="remove(index)">移除</button>
                    </td>
                </tr>
                <tr>
                    <td>总购买价            
                    </td>
                    <td>
                        {{animatenum | filtermoney}}
                    </td>
                    <td>总购买数量
                    </td>
                    <td>

                    </td>
                    <td colspan="2">
                        <button type="button" class="btn btn-danger" @click="empty()">清空购物车</button>
                    </td>
                </tr>
            </tbody>
        </table>

        <p v-if="message.length===0">您的购物车为空</p>
    </div>
    <script src="https://unpkg.com/tween.js@16.3.4"></script>
    <script src="https://cdn.bootcss.com/vue/2.2.3/vue.min.js"></script>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                totalPrice:0,
                animatenum:0,
                message:[
                    {
                        id: 007,
                        name: 'iphone5s',
                        quantity: 3,
                        price: 4000
                   },{
                        id: 1340,
                        name: 'iphone5',
                        quantity: 9,
                        price: 3000
                   },{
                        id: 7758,
                        name: 'imac',
                        quantity: 4,
                        price: 7000
                   },{
                        id: 2017,
                        name: 'ipad',
                        quantity: 5,
                        price: 6000
                    }
                ]
            },
            watch:{
                toComput2:function(newValue,oldValue){
                    this.tween(newValue,oldValue);
                }
            },
            computed:{
                //计算总金额
                toComput2:function(){
                    var vm=this;
                    //每次进来要重置总金额
                    vm.totalPrice=0;
                    this.message.forEach(function(mess){
                        vm.totalPrice+=parseInt(mess.price*mess.quantity);
                    })
                    return this.totalPrice;
                }
            },
            filters:{
                filtermoney:function(value){
                    return '￥'+value ;
                }
            },
            mounted:function(){ 
                this.tween('97000','0');
            },
            methods:{
                //计算总数的方法为什么写在methods里面就不行？
                toComput:function(){
                    var vm=this;
                    vm.message.forEach(function(mess){
                        vm.totalPrice+=parseInt(mess.price*mess.quantity);
                    })
                    return vm.totalPrice;
                },
                add:function(index){
                    var vm=this;
                    vm.message[index].quantity++;
                },
                subtract:function(index){
                    var vm=this;
                    vm.message[index].quantity--;
                    if(vm.message[index].quantity<=0){
                        if (confirm("你确定移除该商品？")) {  
                            vm.message.splice(index,1)
                        } 
                    }

                },
                remove:function(index){
                    var vm=this;
                    if (confirm("你确定移除该商品？")) {  
                        vm.message.splice(index,1)
                    }  
                },
                empty:function(){
                    var vm=this;
                    vm.message.splice(0,vm.message.length);
                },
                jia:function(index){
                    var vm=this;
                    vm.arr[index].one++;
                },
                tween:function(newValue,oldValue){
                    var vm=this;
                    var twen=new TWEEN.Tween({animatenum:oldValue});
                    function animate() {
                        requestAnimationFrame(animate);         
                        TWEEN.update(); 
                    };
                    twen.to({animatenum:newValue},750);
                    twen.onUpdate(function(){
                    //toFixed();保留几位小数
                        vm.animatenum = this.animatenum.toFixed();
                    })
                    twen.start();
                    animate();
                }
            }
        });


    </script>   

</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^