vue购物车案例

最新推荐文章于 2022-12-09 15:35:00 发布

星星大BOSS

最新推荐文章于 2022-12-09 15:35:00 发布

阅读量204

点赞数 1

文章标签： vue.js css html5

原文链接：https://blog.csdn.net/m0_52250741/article/details/113610820?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162998121116780269881918%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=162998121116780269881918&biz_i

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <title>Document</title>
    <style type="text/css">
    .container .cart {
        width: 300px;
        margin: auto;
    }

    .container .title {
        background-color: lightskyblue;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }

    .container .item {
        height: 55px;
        line-height: 55px;
        position: relative;
        border-top: 1px solid #aaa;
    }

    .container .item img {
        width: 45px;
        height: 45px;
        margin: 5px;
    }

    .container .item .name {
        position: absolute;
        width: 90px;
        top: 0;
        left: 55px;
        font-size: 16px;
    }

    .container .item .change {
        width: 100px;
        position: absolute;
        top: 0;
        right: 50px;
    }

    .container .item .change a {
        text-decoration: none;
        font-size: 20px;
        width: 30px;
        background-color: #eee;
        vertical-align: middle;
    }

    .container .item .change .num {
        width: 34px;
        height: 25px;
        margin: 3px;
    }

    .container .item .del {
        position: absolute;
        top: 0;
        right: 0;
        width: 40px;
        text-align: center;
        font-size: 40px;
        cursor: pointer;
        color: red;
    }

    .container .total {
        background-color: orange;
        height: 50px;
        line-height: 50px;
        text-align: right;
    }

    .container .total button {
        margin: 0 10px;
        background-color: orangered;
        height: 35px;
        width: 80px;
        border: 0;
    }

    .container .total span {
        color: red;
        font-weight: bold;
    }

    .container .item .del:hover {
        background-color: plum;
    }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <my-cart></my-cart>
        </div>
    </div>
    <script src="js/vue.js"></script>
    <script type="text/javascript">
    var CartTitle = {
        props: ['uname'],
        template: `
			<div class="title">{{uname}}的商品</div>
			`
    };
    var CartList = {
        props: ['list'],
        template: `
			    <div>
					<div :key='item.id' v-for='item in list' class="item">
						<img :src="item.img">
						<div class="name">{{item.name}}</div>
						<div class="change">
							<a href="" @click.prevent='sub(item.id)'>－</a>
							<input type="text" class="num" :value='item.num' @blur='changeNum(item.id,$event)'>
							<a href="" @click.prevent='add(item.id)'>＋</a>
						</div>
						<div class="del" @click='del(item.id)'>×</div>
					</div>
				</div>
			`,
        methods: {
            changeNum: function(id, event) {
                this.$emit('change-num', {
                    id: id,
                    type: 'change',
                    num: event.target.value
                })
            },
            sub: function(id) {
                this.$emit('change-num', {
                    id: id,
                    type: 'sub'
                })
            },
            add: function(id) {
                this.$emit('change-num', {
                    id: id,
                    type: 'add'
                })
            },
            del: function(id) {
                // 把id传递给父组件
                this.$emit('cart-del', id);
            }
        }
    };
    var CartTotal = {
        props: ['list'],
        template: `
			    <div class="total">
					<span>总价：{{total}}</span>
					<button>结算</button>
				</div>
			`,
        computed: {
            total: function() {
                // 计算商品的总价
                var t = 0;
                this.list.forEach(item => {
                    t += item.price * item.num;
                });
                return t;
            }
        }
    };
    Vue.component('my-cart', {
        data: function() {
            return {
                uname: '憨憨',
                list: [{
                    id: 1,
                    name: '农夫山泉',
                    price: 100,
                    num: 2,
                }, {
                    id: 2,
                    name: '笔记本',
                    price: 2000,
                    num: 2,
                }, {
                    id: 3,
                    name: '苹果手机',
                    price: 3000,
                    num: 1,
                }, {
                    id: 4,
                    name: '迪奥口红',
                    price: 300,
                    num: 1,
                }, {
                    id: 5,
                    name: '护肤品',
                    price: 200,
                    num: 4,
                }]
            }
        },
        template: `
			   <div class="cart">
			      <cart-title :uname='uname'></cart-title>
			      <cart-list :list='list' @change-num='changeNum($event)' @cart-del='delCart($event)'></cart-list>
			      <cart-total :list='list'></cart-total>
			   </div>
			`,
        components: {
            'cart-title': CartTitle,
            'cart-list': CartList,
            'cart-total': CartTotal
        },
        methods: {
            changeNum: function(val) {
                // 分为三种情况：输入域变更、加号变更、减号变更
                if (val.type == 'change') {
                    // 根据子组件传递过来的数据，更新list中对应的数据
                    this.list.some(item => {
                        if (item.id == val.id) {
                            item.num = val.num;
                            // 终止遍历
                            return true;
                        }
                    });
                } else if (val.type == 'sub') {
                    // 减一操作
                    this.list.some(item => {
                        if (item.id == val.id) {
                            item.num -= 1 && item.num >= 1;
                            // 终止遍历
                            return true;
                        }
                    })
                } else if (val.type == 'add') {
                    // 加一操作
                    this.list.some(item => {
                        if (item.id == val.id) {
                            item.num += 1;
                            // 终止遍历
                            return true;
                        }
                    })
                }
            },
            delCart: function(id) {
                // 根据id删除list中对应的数据
                // 1、找到id所对应数据的索引
                var index = this.list.findIndex(item => {
                    return item == id;
                });
                // 2、根据索引删除对应数据
                this.list.splice(index, 1);
            }
        }
    })
    var vm = new Vue({
        el: '#app',
        data: {}
    })
    </script>
</body>

</html>

星星大BOSS

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue购物车案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></sc.
复制链接

扫一扫