博客园 首页 私信博主 我的git 我的网站 管理 动画

vue-购物车效果 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <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>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.price}}</td>
                        <td> <button @click="res(index)" v-bind:disabled="item.count===0">-</button>{{item.count}}<button @click="add(index)">+</button> </td>
                        <td> <button @click="del(index)">删除</button> </td>
                    </tr>
                </tbody>
            </table>
            购物车总价：{{total}}
        </div>
    </body>
    <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}
                ],    
            },
            computed:{
                total:function(){
                    var t=0;
                    for(var i=0;i<this.list.length;i++){
                        t+=this.list[i].price*this.list[i].count;
                    }
                    return t;//价钱*数量
                },
            },
            
            
            
            methods:{
                add:function(index){
                    this.list[index].count++;
                },
                res:function(index){
                    this.list[index].count--;
                },
                del(index){
                    this.list.splice(index,1);//arrayObject.splice(index，count)  删除数组中的值
                },
            },
        });
    </script>
</html>

 

posted @ 2019-10-22 19:22  魏婴  阅读(295)  评论(0)    收藏  举报