实战:利用计算属性、指令等知识开发购物车

标签: # Vue.js教程  vue  vue.js  html5  html  javascript

实战:利用计算属性、指令等知识开发购物车

源码地址

购物车需要展示 一个己加入购物车的商品列表,包含商品名称、商品单价、购买数量和操作等信息,还需要实时显示购买的总价。其中购买数量可以增加或减少,每类商品还可以从购物车中移除。也能添加商品到购物车中,最后一项是否选中该商品的功能,总价变为只计算选中商品的总价
实现效果如下:
1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
        table{
            border: 1px solid #e9e9e9;
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
        }
        th, td {
            padding: 8px 16px;
            border: 1px solid #e9e9e9;
            text-align: left;
        }
        th {
            background: #f7f7f7;
            color: #5c6b77;
            font-weight: 600;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div id="app">
            商品名称:
            <input type="text" v-model="name">
            商品单价:
            <input type="text" v-model="price">
            购买数量:
            <input type="text" v-model="count">
            <button @click="newAdd()">添加</button>
            <table>
                <thead>
                    <th></th>
                    <th>商品名称</th>
                    <th>商品单价</th>
                    <th>购买数量</th>
                    <th>操作</th>
                    <th>是否选择</th>
                </thead>
                <tbody>
                    <tr v-for=" (item, index) in list">
                        <td>{{ index + 1 }}</td>
                        <td>{{ item.name }}</td>
                        <td>{{ item.price }}</td>
                        <td>
                            <button @click="Reduce(index)">-</button>
                            {{ item.count }}
                            <button @click="Add(index)">+</button>
                        </td>
                        <td>
                            <button @click="Remove(index)">移除</button>
                        </td>
                        <td>
                            <input type="checkbox" name="select" v-model="item.select"/>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div>总价 {{ totalPrice }} 元</div>
        </template> 
        <div v-else>购物车为空</div>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                list : [
                    {
                        id : 1,
                        name : "iPhone 7",
                        price : '6666',
                        count : 1,
                        select:true
                    },
                    {
                        id : 2,
                        name : "iPhone 7 pro",
                        price : '8888',
                        count : 1,
                        select:true
                    },
                    {
                        id : 3,
                        name : "iPad",
                        price : '7658',
                        count : 1,
                        select:true
                    },
                ],
                name:'',
                price:'',
                count:''
            },
            computed: {
                totalPrice : function() {
                    var s = 0;
                    for(let i = 0; i < this.list.length; i++)
                        if(this.list[i]["select"])
                            s += (this.list[i]["price"] * this.list[i]["count"]);
                    return s;
                }
            },
            methods : {
                Reduce(index) {
                    this.list[index].count = this.list[index].count == 1 ? 1 : this.list[index].count-1;
                },
                Add(index) {
                    this.list[index].count += 1;
                },
                Remove(index) {
                    this.list.splice(index, 1);
                },
                newAdd(){
                    this.list.push(
                        {
                            id : this.list.length,
                            name : this.name,
                            price : this.price,
                            count : this.count,
                            select: true
                        }
                    )
                }
            }
        })
    </script>
</body>
</html>
版权声明:本文为p1967914901原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/p1967914901/article/details/106586349

智能推荐

TYVJ 4864 天天去哪吃 || 清北学堂金秋杯大奖赛

题目描述: 记录一下i这个值上次出现的位置在哪里,就是pre...

java反编译

jvm 把Boolean类型的值flag当做int类型处理。​​​ Foo.java: 由 class 文件生成 jasm 文件:java -jar asmtools.jar jdis Foo.class > Foo.jasm  修改jasm文件: 执行反编译: java -jar jd-gui-1.6.6.jar File 打开Foo.class文件:b修改为2 重新执行java...

【学习笔记】03-v-html的学习和示例

v-html的认识和使用 示例: 显示结果: 注意:v-html是有复制的...

Java实现在线考试系统(系统介绍)

1.和现在有的考试系统有以下几种优势: a.和现在有的系统比较起来,本系统有科目、章节、老师、学生、班级等信息的管理,还有批阅试卷查看已批阅试卷等。传统的考试系统划分并不细,业务功能简单。 b.和学校的考试系统还有外面的考试系统比较起来,本系统是B/S结构,学校的考试系统一般为C/S结构,性能方面不如B/S结构,并且C/S接口需要安装客户端,客户端压力很大,我的系统只需要电脑具有浏览器,在同一局域...

计算机视觉--多视几何初步尝试

基础矩阵的原理 K和K’分别是两个相机的参数矩阵。p和p’是X在平面π的坐标表示。所以可以得出 具体计算过程 代码: #!/usr/bin/env python coding: utf-8 from PIL import Image from numpy import * from pylab import * import numpy as np from imp ...

猜你喜欢

java初学者怎么学习才可以快速入门

java初学者怎么学习才可以快速入门 一、了解JAVA 我们要知道:Java是由Sun Microsystems公司于1995年5月推出的Java面向对象程序设计语言。 Java之父:詹姆斯·高斯林 1.1 java的三个体系 Java SE(Java Platform Standard Edition)。Java SE 以前称为 J2SE。它允许开发和部署在桌面、服务器、嵌入式环境...

字段属性之主键&增删改查&自增长&唯一键约束

字段属性之主键&自增长&唯一键约束 主键 主键:primary key 主要的键 一张表中只有一个字段可以使用对应的键,用来唯一的约束该字段里面的数据,不能重复,这种称之为主键 一张表只能最多一个主键 增加主键 SQL操作中有多种方式增加主键大体分为三种 1.在创建表的时候直接在字段之后跟primary key关键字(主键本身不允许为空) 优点:非常直接:缺点:只能使用一个字段作为...

linux下 基于libmad的socket多用户mp3音频在线播放服务器

在众多大神的帮助下,这个在线播放流媒体服务器终于完成啦。。。。 这个mp3流媒体服务器设计的思路是,服务器程序server用多线程实现和多个客户端的通信(这是必然的),然后发送给客户端当前的音频列表公客户端选择,之后根据k客户端的选择给多个客户端传输相应mp3文件的数据,同时,客户端进行实时地音频解码并播放。 关于libmad开源mp3音频解码库的使用,见上一篇博客吧。。。。 在服务器程序这一端,...

Nginx

Nginx Nginx简介: Nginx是一个高性能的http和反向代理服务器,特点是有内存少,并发能力强,事实上Nginx的并发能力确实在同类型网页服务器中表现较好, Nginx用作web服务器:Nginx可以作为静态页面的web服务器,同时还支持CGI语言,但不支持java,java程序只能通过Tomcat配合完成。Nginx专为性能优化而开发,性能是其最重要的考量,实现上非常注重效率,能经受...

SpringCloud Alibaba - Sentinel入门案例(二)(流控规则 | 直接 / 关联 / 链路 / 快速失败 / Warm Up / 排队等待)

SpringCloud Alibaba - Sentinel入门案例(二)(流控规则 | 直接 / 关联 / 链路 / 快速失败 / Warm Up / 排队等待) 回溯 Sentinel 基本概念 正文 环境准备 流控规则介绍 简单介绍 对 阈值类型 / 单机阈值做 测试 流控模式 直接流控模式 关联流控模式 链路流控模式 资源名称的修改 链路模式正文 坑来了,怎么解决? 禁止收敛URL的入口 ...