vue实现简单的购物车功能

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>购物车</title>
</head>
<body> 
        <div id="app">
                <table>
                       <thead>
                                   <tr>
                                       <th>序号</th>
                                       <th>商品名称</th>
                                       <th>商品单价</th>
                                       <th>购买数量</th>
                                       <th>操作</th>
                                   </tr>
                       </thead>
                       <tbody>
                               <tr v-for="(item,index) in list">
                                     <td>{{index+1}}</td>
                                     <td>{{item.name}}</td>
                                     <td>{{item.price}}</td>
                                     <td>
                                          <button @click="handleReduce(index)" :disabled="item.count===1">-</button>
                                          {{item.count}}
                                          <button @click="handleAdd(index)">+</button>
                                     </td>
                                     <td>
                                            <button @click="handleRemove(index)">移除</button>
                                     </td>

                               </tr>
                       </tbody>    
                </table>
                <div>总价：{{totalPrice}}</div>
                <!-- <div v-else>购物车为空</div> -->


        </div>
     

</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
        var vue=new Vue({
            el:"#app",
            data:{
                list:[
                {
                    id:1,
                    name:'iphone 7',
                    price:6188,
                    count:1
                },
                {
                    id:2,
                    name:'iphone 8',
                    price:7188,
                    count:1
                },
                {
                    id:3,
                    name:'iphone X',
                    price:8188,
                    count:1
                }],
            },
            methods:{
                handleReduce:function(index){
                    if(this.list[index].count===1) return;
                    this.list[index].count--;
                },
                handleAdd:function(index){
                    this.list[index].count++;
                },
                handleRemove:function(index){
                    this.list.splice(index,1);
                }
            },
            computed:{
                totalPrice:function(){
                    var total=0;
                    for(var i=0,len=this.list.length;i<len;i++){
                        total+=this.list[i].price*this.list[i].count;
                    }

                    return total.toString().replace(/\B(?=(\d{3})+$)/g, ',');
                }
            }




        });
        
</script>
</html>
vue实现简单的购物车功能

猜你喜欢
