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" 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 ;
            }
        },

更多资料免费分享加群 120342833 验证回答 ZZ 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>

收藏 1分享浏览 3606
6年前
说几句
广告位 点击查看投放指南

友情链接 大搜车前端团队博客
我的收藏