Vue购物车小案例

👁 2020-08-22

利用vue.js写一个简易的购物车小案例

该案例的功能有：点击-号可以减少物品的数量；点击+可以增加物品的数量；可以直接在输入框中修改物品的数量；点击×号可以删除该物品；可以计算出所有物品的总价，数量改变时总价跟着改变。

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车案例</title>
</head>
<body>
    <div id="content">
        <div class="title"><h3>总商品</h3></div>
        <div class="list">
            <ul>
                <li v-for="item in shoplist" :key="item.id">
                    <div class="shop">
                        <img v-bind:src="item.img" alt="">

                        <span>{{item.name}}</span>
                        <span>{{"¥"+item.price}}</span>
                        <div class="sub"><a v-on:click.prevent="sub(item.id)">-</a></div>
                        <input type="text" v-bind:value="item.num" v-on:blur="changeNum(item.id,$event)">
                        <div class="add"><a v-on:click.prevent="add(item.id)">+</a></div>
                        <div class="delete"><a v-on:click.prevent="del(item.id)">×</a></div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="total">
            <span>总价：{{"¥"+totalprice}}</span>
        </div>
    </div>
</body>
</html>

css代码

* {
            padding: 0;
            margin: 0 ;
        }
        #content {
            width: 500px;
            margin: 100px auto;
            height: 440px;
            text-align: center;
        }
        ul li {
            list-style-type: none;
        }
        .title {
            text-align: center;
        }
        .shop {
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 100px;
            text-align: center;

        }
        .shop img {
            width: 80px;
            height: 80px;
            vertical-align: middle;
        }
        .shop .sub {
            background-color: green;
        }
        .shop .add {
            background-color: orange;
        }
        .shop .delete {
            background-color: red;
        }
        .shop div {
            display: inline-block;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
        }
        .shop a {
            cursor: pointer;
        }
        .shop input {
            width: 50px;
            height: 20px;

        }
        .total {
            font-weight: 700;
        }

js代码

<script>
    var vm=new Vue({
        el:"#content",
        data:{
            shoplist:[{
                id:1,
                name:"phone",
                price:2999,
                num:1,
                img:'images/1.jpg'
            },{
                id:2,
                name:"computer",
                price:5999,
                num:1,
                img:'images/2.jpg'
            },{
                id:3,
                name:"watch",
                price:8999,
                num:1,
                img:'images/3.jpg'
            },{
                id:4,
                name:"perfume",
                price:999,
                num:1,
                img:'images/4.jpg'
            }]

        },
        computed: {
            totalprice:function(){
                var price=0;
                this.shoplist.forEach(item => {
                    price+=item.price*item.num; //利用计算属性计算总价
                    console.log("价格"+price);
                });
                return price;
            }
        },
        methods:{
            del:function(val){
                var index=this.shoplist.findIndex((item) => {
                    console.log("商品id："+val);
                    return item.id==val; //获得需要删除物品的id
                });
                this.shoplist.splice(index,1);
            },
            changeNum:function(val,e){
                this.shoplist.some((item)=>{
                    if(item.id==val){
                        item.num=e.target.value;
                        console.log("数量input："+item.num); //在输入框中修改数量
                        return true;
                    }
                })

            },
            add:function(val){
                this.shoplist.some((item)=>{
                    if(item.id==val){
                        item.num++;
                        console.log("数量+："+item.num);
                        return true;
                    }

                })
            },
            sub:function(val){
                this.shoplist.some((item)=>{
                    if(item.id==val){
                        if(item.num>0){
                            item.num--;
                        console.log('数量-:'+item.num);
                        }else{
                            item.num=0;
                        }

                        return true;
                    }
                })
            }
        }

    })


</script>

本文作者： étoile

本文链接： http://sunnyllxx.github.io/2020/08/22/Shopping-cart-case/

版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！

-------------本文结束感谢您的阅读-------------