博客
关于我
基于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/

你可能感兴趣的文章
mt_rand
查看>>
mysql -存储过程
查看>>
mysql /*! 50100 ... */ 条件编译
查看>>
mudbox卸载/完美解决安装失败/如何彻底卸载清除干净mudbox各种残留注册表和文件的方法...
查看>>
mysql 1264_关于mysql 出现 1264 Out of range value for column 错误的解决办法
查看>>
mysql 1593_Linux高可用(HA)之MySQL主从复制中出现1593错误码的低级错误
查看>>
mysql 5.6 修改端口_mysql5.6.24怎么修改端口号
查看>>
MySQL 8.0 恢复孤立文件每表ibd文件
查看>>
MySQL 8.0开始Group by不再排序
查看>>
mysql ansi nulls_SET ANSI_NULLS ON SET QUOTED_IDENTIFIER ON 什么意思
查看>>
multi swiper bug solution
查看>>
MySQL Binlog 日志监听与 Spring 集成实战
查看>>
MySQL binlog三种模式
查看>>
multi-angle cosine and sines
查看>>
Mysql Can't connect to MySQL server
查看>>
mysql case when 乱码_Mysql CASE WHEN 用法
查看>>
Multicast1
查看>>
mysql client library_MySQL数据库之zabbix3.x安装出现“configure: error: Not found mysqlclient library”的解决办法...
查看>>
MySQL Cluster 7.0.36 发布
查看>>
Multimodal Unsupervised Image-to-Image Translation多通道无监督图像翻译
查看>>