Vue写一个购物车

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

 

更多资料免费分享加群      120342833      验证回答      ZZ

        <p v-if="message.length===0">您的购物车为空</p>

    </div>

    <script src="https://unpkg.com/[email protected]"></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写一个购物车项目

利用Vue写一个购物车项目

利用Vue写一个购物车项目

前端开发:Vue写一个购物车

vue购物车出现了一个bug,一个单选按钮取消选中,为什么全部按钮包括全选按钮都取消选中了?

用vue写购物车小案例使用到的知识点总结