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

实现效果如图：

代码：

<!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. asp.net机制理解（Javaweb同理）

    1.页面运行先后顺序 先执行aspx中的代码,然后再合并到HTML中,最后一起送到浏览器执行,HTML是从上到下执行的,而HTML中的Windows.onload()最后执行.而由于aspx中的代码是 ...

  2. ASP.NET Core 之 Identity

    Claims:声明(证件单元)Identity:身份Principal:当事人Authentication :认证Authorization:授权 http://www.cnblogs.com/sav ...

  3. 《linux就该这么学》第三节课 第二节命令笔记

    命令笔记 (随笔原创,借鉴请修改) linux系统中一切都是文件 2.4  系统状态的命令:  ifconfig   :    查看系统网卡信息,包括网卡名称,ip地址,掩码,mac地址,收到数据包大 ...

  4. redis----------windows下安装redis以及PHP的redis扩展

    1.redis简介 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(s ...

  5. 创建servlet程序知识点详解---servlet-day12

    自定义标签 (1)编程步骤 step1 jsp标签分为复杂标签技术(old),简单标签(new) 注(了解) jsp标签技术分为复杂标签技术(old),简单标签技术(new) step2 ###MVC ...

  6. HTTP请求中POST与GET的区别

      本文章已收录于:   一.原理区别 一般我们在浏览器输入一个网址访问网站都是GET请求;再FORM表单中,可以通过设置Method指定提交方式为GET或者POST提交方式,默认为GET提交方式. ...

  7. GoldenGate for Java adapter介绍二（代码篇）

    本示例主要介绍通过实现OGG的接口函数,实现自定义处理增量数据,将数据实时写入到mariadb (OGG官方不支持此数据库,所以只能采用自定义方式实现).以下是本次示例的4个类: Connection ...

  8. while(scanf("%d %d",&a,&b)!=EOF)

    scanf("%d %d",&a,&b)返回输入的数据和格式字符串中匹配次数.当dos或windows中输入ctrl+z(模拟文件结束符EOF)时,scanf返回E ...

  9. 单元测试系列之七：Sonar 数据库表关系整理一（rule相关）

    更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢! 原文链接:http://www.cnblogs.com/zishi/p/7510072.html 简介:Sonar ...

  10. BZOJ5487: [Usaco2018 Dec]Cowpatibility

    Description 研究证明,有一个因素在两头奶牛能否作为朋友和谐共处这方面比其他任何因素都来得重要--她们是不是喜欢同 一种口味的冰激凌!Farmer John的N头奶牛(2≤N≤50,000) ...