博客
关于我
基于Vue组件化开发的购物车小练习
阅读量:100 次
发布时间:2019-02-26

本文共 8147 字,大约阅读时间需要 27 分钟。

实现效果:

根据业务功能进行组件化划分

  1. 标题组件(展示文本)
  2. 列表组件(列表展示、商品数量变更、商品删除)
  3. 结算组件(计算商品总额)
    在这里插入图片描述

实现代码:

<!DOCTYPE html><html lang="Zh"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        .container .cart {                width: 300px;            margin: auto;        }                .container .title {                background-color: lightblue;            height: 40px;            line-height: 40px;            text-align: center;            font-size: 20px;            font-weight: 700;        }                .container .total {                background-color: #FFCE46;            height: 50px;            line-height: 50px;            text-align: center;        }                .container .total button {                margin: 0 10px;            background-color: #DC4C40;            height: 35px;            width: 80px;            border: 0;        }                .container .total span {                color: red;            font-weight: bold;            font-size: 22px;        }                .container .item {                height: 55px;            line-height: 55px;            position: relative;            border-top: 1px solid #ADD8E6;        }                .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 {                font-size: 20px;            width: 30px;            text-decoration: none;            background-color: lightgray;            vertical-align: middle;        }                .container .item .change .num {                width: 40px;            height: 25px;        }                .container .item .del {                position: absolute;            top: 0;            right: 0px;            width: 40px;            text-align: center;            font-size: 40px;            cursor: pointer;            color: red;        }                .container .item .del:hover {                background-color: orange;        }    </style></head><body>    <div id="app">        <div class="container">            <my-cart></my-cart>        </div>    </div>    <script type="text/javascript" src="https://blog-static.cnblogs.com/files/jacklzx/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) {                        // console.log(id, event.target.value);                    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) {                        // console.log(id);                    // 把id传递给父组件                    this.$emit('cart-del', id);                }            }        }        var CartTotal = {                props: ['list'],            template: `        <div class="total">          <span>总价:{     {total}}</span>           </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: 'Jack',                    list: [{                            id: 1,                        name: 'TCL彩电',                        price: 1000,                        num: 1,                        img: 'https://s3.ax1x.com/2020/12/02/DIhoGR.jpg'                    }, {                            id: 2,                        name: '机顶盒',                        price: 1000,                        num: 1,                        img: 'https://s3.ax1x.com/2020/12/02/DIhIi9.jpg'                    }, {                            id: 3,                        name: '海尔冰箱',                        price: 1000,                        num: 1,                        img: 'https://s3.ax1x.com/2020/12/02/DIh4IJ.jpg'                    }, {                            id: 4,                        name: '小米手机',                        price: 1000,                        num: 1,                        img: 'https://s3.ax1x.com/2020/12/02/DIhha4.jpg'                    }, {                            id: 5,                        name: 'PPTV电视',                        price: 1000,                        num: 2,                        img: 'https://s3.ax1x.com/2020/12/02/DIhfZF.jpg'                    }]                }            },            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) {                        // console.log(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--                                    return true; // 终止遍历                            }                        });                    } else {                            this.list.some(item => {                                if (item.id === val.id) {                                    item.num++                                    return true; // 终止遍历                            }                        });                    }                },                delCart: function(id) {                        // 根据id删除list中的数据                    // 1. 找到id所对应的索引                    let index = this.list.findIndex(item => {                            return item.id === id;                    });                    // 根据索引删除对应的数据                    this.list.splice(index, 1);                }            }        });        var vm = new Vue({                el: '#app',            data: {    }        });    </script></body></html>

转载地址:http://acsu.baihongyu.com/

你可能感兴趣的文章
Luogu2973:[USACO10HOL]赶小猪
查看>>
mabatis 中出现&lt; 以及&gt; 代表什么意思?
查看>>
Mac book pro打开docker出现The data couldn’t be read because it is missing
查看>>
MAC M1大数据0-1成神篇-25 hadoop高可用搭建
查看>>
mac mysql 进程_Mac平台下启动MySQL到完全终止MySQL----终端八步走
查看>>
Mac OS 12.0.1 如何安装柯美287打印机驱动,刷卡打印
查看>>
MangoDB4.0版本的安装与配置
查看>>
Manjaro 24.1 “Xahea” 发布!具有 KDE Plasma 6.1.5、GNOME 46 和最新的内核增强功能
查看>>
mapping文件目录生成修改
查看>>
MapReduce程序依赖的jar包
查看>>
mariadb multi-source replication(mariadb多主复制)
查看>>
MariaDB的简单使用
查看>>
MaterialForm对tab页进行隐藏
查看>>
Member var and Static var.
查看>>
memcached高速缓存学习笔记001---memcached介绍和安装以及基本使用
查看>>
memcached高速缓存学习笔记003---利用JAVA程序操作memcached crud操作
查看>>
Memcached:Node.js 高性能缓存解决方案
查看>>
memcache、redis原理对比
查看>>
memset初始化高维数组为-1/0
查看>>
Metasploit CGI网关接口渗透测试实战
查看>>