这一篇把之前所学的内容做一个总结，实现一个购物车样例，可以增加或者减少购买数量，可移除商品，并且购物车总价随着你的操作实时变化。

实现效果如图：

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>购物车案例</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <style>

        [v-cloak] {

            display: none;

        }

        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-color: #f7f7f7;

            color: #5c6b77;

            font-weight: 600;

            white-space: nowrap;

        }

    </style>

</head>

<body>

<div id="app" v-cloak>

    <table>

        <tr>

            <th>序列号</th>

            <th>商品名称</th>

            <th>商品单价</th>

            <th>购买数量</th>

            <th>操作</th>

        </tr>

        <tr v-for="(item, index) in list">

            <td>{{ index + 1 }}</td>

            <td>{{ item.name }}</td>

            <td>{{ item.price }}</td>

            <td>

                <button @click="reduce(index)" :disable="item.count === 1">-</button>

                {{ item.count }}

                <button @click="add(index)">+</button>

            </td>

            <td><button @click="del(index)">移除</button></td>

        </tr>

    </table>

    <p>总价：￥{{ total }}</p>

</div>

<script>

    var app = new Vue({

        el: '#app',

        data: {

            list: [

                {

                    id: 1,

                    name: 'Iphone xs',

                    price: 10000,

                    count: 1

                },

                {

                    id: 2,

                    name: 'Ipad Pro',

                    price: 6666,

                    count: 1

                },

                {

                    id: 3,

                    name: 'MacBook Pro',

                    price: 25000,

                    count: 1

                },

            ]

        },

        methods: {

            reduce: function (index) {

                if(this.list[index].count === 1) return;

                this.list[index].count--;

            },

            add: function (index) {

                this.list[index].count++;

            },

            del: function (index) {

                this.list.splice(index, 1);

            }

        },

        computed: {

            total: function () {

                var total = 0;

                for(var i = 0; i < this.list.length; i++) {

                    total += this.list[i].price * this.list[i].count;

                }

                return total.toString().replace(/\B(?=(\d{3})+$)/g, ',');

            }

        }

    });

</script>

</body>

</html>

Vue(五) 购物车案例的更多相关文章

  1. Vue实战-购物车案例

    Vue实战-购物车案例 普通购物车 实现的功能:添加商品到购物车,计算总价 <!DOCTYPE html> <html lang="en"> <hea ...

  2. jQuery基础入门+购物车案例详解

    jQuery是一个快速.简洁的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多 ...

  3. Flume环境搭建_五种案例

    Flume环境搭建_五种案例 http://flume.apache.org/FlumeUserGuide.html A simple example Here, we give an example ...

  4. easyUI拖动购物车案例

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  5. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  6. Flume环境搭建_五种案例(转)

    Flume环境搭建_五种案例 http://flume.apache.org/FlumeUserGuide.html A simple example Here, we give an example ...

  7. 使用vue模拟购物车小球动画

    使用vue模拟购物车小球动画 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> < ...

  8. DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例

    1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...

  9. vue实战记录（五）- vue实现购物车功能之商品总金额计算和单选全选删除功能

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(五) GitHub:sue ...

随机推荐

  1. Python 总结

    python3.7下载地址 Python安装pip 1.首先检查linux有没有安装python-pip包,直接执行 yum install python-pip 2.没有python-pip包就执行 ...

  2. CentOS 7 nginx+tomcat9 session处理方案之session保持

    Session保持(会话保持)是我们见到最多的名词之一,通过会话保持,负载均衡进行请求分发的时候保证每个客户端固定的访问到后端的同一台应用服务器.会话保持方案在所有的负载均衡都有对应的实现.而且这是在 ...

  3. Openstack-Namespaces

    介绍OpenStack neutron使用Linux网络命名空间来避免物理网络和虚拟网络间的冲突,或者不同虚拟网络间的冲突. 网络命名空间就是一个独立的网络协议栈,它有自己的网络接口,路由,以及防火墙 ...

  4. 详解Python变量在内存中的存储

    这篇文章主要是对python中的数据进行认识,对于很多初学者来讲,其实数据的认识是最重要的,也是最容易出错的.本文结合数据与内存形态讲解python中的数据,内容包括: 引用与对象 可变数据类型与不可 ...

  5. Solr入门介绍

    solr入门案例 solr是apache下的一个全文检索引擎系统. 我们需要在服务器上单独去部署solr, 通过它的客户端工具包solrJ, 就是一个    jar包, 集成到我们项目中来调用服务器中 ...

  6. 用PHP实现反向代理服务器

    什么是反向代理: 百度百科有云: 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给int ...

  7. Docker Kubernetes Service 代理服务创建

    Docker Kubernetes  Service 代理服务创建 创建Service需要提前创建好pod容器.再创建Service时需要指定Pod标签,它会提供一个暴露端口默会分配容器内网访问的唯一 ...

  8. redis.clients.jedis.exceptions.JedisConnectionException: java.net.SocketException: 断开的管道 (Write failed)

    昨晚,包发到测试环境中,出现redis.clients.jedis.exceptions.JedisConnectionException: java.net.SocketException: 断开的 ...

  9. ukylin 使用deepin-wine

    之前一直是使用deepin的,但是自打前阵子更新内核之后,我的显卡就总出问题,这里也顺便f**k下NVIDIA. 在装了十几二十遍系统之后我终于还是妥协了,deepin最近又更新了,不知道解决我的显卡 ...

  10. Java中static的用法解析

    知识点1.static关键字a.可以修饰变量,方法,代码块b.修饰的变量和方法可以使用类名.变量名/类名.方法名调用c.static修饰的资源为静态资源,在类加载的时候执行d.在静态方法中只能调用静态 ...