<!DOCTYPE html>

<html lang="en">

    <head>

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

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link href="style.css" rel="stylesheet">

    </head>

    <body>

    <div id="app" v-cloak>

        <template v-if="list.length">

            <table>

                <thead>

                    <tr>

                        <th></th>

                        <th>商品名称</th>

                        <th>商品单价</th>

                        <th>购买数量</th>

                        <th>操作</th>

                    </tr>

                </thead>

                <tbody>

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

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

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

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

                        <td>

                            <button

                                @click="handleReduce(index)"

                                :disabled="item.count===1">-</button>

                            {{ item.count }}

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

                        </td>

                        <td>

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

                        </td>

                    </tr>

                </tbody>

            </table>

            <div>总价：￥ {{ totalPrice }}</div>

        </template>

        <div v-else>购物车为空</div>

    </div>

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>

    <script>

        var app=new Vue({

            el:'#app',

            data:{

                list:[

                    {

                        id:1,

                        name:'iphone 7',

                        price:6188,

                        count:1

                    },

                    {

                        id:2,

                        name:'ipad pro',

                        price:5888,

                        count:1

                    },

                    {

                        id:3,

                        name:'MacBook Pro',

                        price:21488,

                        count:1

                    }

                ]

            },

            computed:{

                //计算属性

                totalPrice:function(){

                    var total=0;

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

                    {

                        var item=this.list[i];

                        total+=item.price*item.count;

                    }

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

                }

            },

            methods:{

                //数量减去

                handleReduce:function(index){

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

                    this.list[index].count--;

                },

                //添加

                handleAdd:function(index){

                    this.list[index].count++;

                },

                //删除

                handleRemove:function(index)

                {

                    this.list.splice(index,1)

                }

            }

        });

    </script>

    </body>

</html>

index.html

[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: center;

}

th{

    background: #f7f7f7;

    color: #5c6b77;

    font-weight: bold;

    white-space: nowrap;/*规定段落中的文本不进行换行：*/

}

style.css

最终效果：

Vue.js实战 5.5章 购物车的更多相关文章

  1. vue.js实战——购物车练习（包含全选功能）

    vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...

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

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

  3. 分享Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站

    这是个什么的项目? 使用 Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站. 博客线上地址:www.boblog.com Github地址:https: ...

  4. vue.js 实战 todo list

    vue.js 起源 vue.js 的作者是尤雨溪,是一名中国人,之前在谷歌工作,现在在全职维护 vue 项目. vue.js 是 2014 年推出来的.现在已经更新到 2.x 版本,3.0 版本会在 ...

  5. vue.js实战——升级版购物车

    HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  6. vue.js实战(文摘)

    ---------------第1篇 基础篇 第1章 初始vue.js 第2章 数据绑定和第一个vue应用 第3章 计算属性 第4章 v-bind及class与style绑定 第5章 内置命令 第6章 ...

  7. Vue.js实战

    指令 什么是指令 指令,directives,是vue非常常用的功能,在template里. 都是以v-开头 不是自己所为html元素,比如假设指令叫v-abc,没有这种写法,这是组件(compone ...

  8. Vue.js 实战教程（附demo）

    在实战之前,你需要对vuejs的基础语法有一定的了解,可以通过以下几个途径进行学习: vue.js官方文档:https://cn.vuejs.org/v2/guide/index.html vue.j ...

  9. Vue.js 实战总结

    最近在某个项目中用到了Vue.js,从上手做开发到项目发布,一步步踩了不少坑.本文试图总结过去一个多月使用Vue.js中的一些经验,也算是一点心得体会吧,拿出来与大家分享,欢迎多多交流. Vue.js ...

随机推荐

  1. 关于使用mongodb中遇到的时间戳雷同的问题

    文不对题,实际上不是时间戳,而是我们使用js取当前毫秒数,将他看为时间戳,每次updata的时候,获取当前毫秒数,把它当做create_time的默认值,自动添加到我们的数据库中,数据模型如下 开始的 ...

  2. 集训第四周（高效算法设计）G题 (贪心）

    G - 贪心 Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Submit Status Desc ...

  3. 移动Web解决方案的链接收藏

    信息类 html5 浏览器兼容性查询 - 浏览器内建对象文档 es5规范浏览器兼容性表格 es6规范浏览器兼容性表格 stackoverflow 最靠谱的问题解决方案 github 开源代码网站 全球 ...

  4. 添物不花钱学JavaEE（基础篇） --HTML

    HTML是什么? HTML – Hyper Text Markup Language HTML官方网址 http://www.w3.org/TR/2014/REC-html5-20141028/ 其实 ...

  5. MySQL最优配置文件模板·2016-11-28

    小伙伴们大爱的MySQL最优配置文件模板更新啦.对之前的MySQL最优配置文件·20160901做了一些修正,更为名至实归.可以通过此链接进行下载.当然,更欢迎同学们提出意见和建议,共同打造一个最优M ...

  6. uva1366/LA3530

    简单的矩阵上的dp 从左上角扫到右下角,dp[i][j][0] 代表在i,j处选A ,dp[i][j][1] 代表在i,j处选B. dp[i][j][0]=max(dp[i-1][j][1],dp[i ...

  7. [转]MySQL5字符集支持及编码研究

    前言 在更新数据库时,有时会遇到这样的错误: Illegal mix of collations (gbk_chinese_ci,IMPLICIT) and (utf8_general_ci,COER ...

  8. UVA 1025_A Spy in the Metro

    [题意](小紫书)一个人从站台1出发,乘车要在时刻T到达站台n,为使在站台等车时间最短,她可以选择乘坐两个方向的列车,并在客车停靠站的时候换车. [分析]每次停站下车时,她都有三种选择,1.原地不动 ...

  9. codevs——1017 乘积最大

    1017 乘积最大 2000年NOIP全国联赛普及组NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解       题目描述 Desc ...

  10. hibernate详解一

    hibernate介绍 hibernate是一个开源的轻量级的框架, hibernate框架应用在javaee三层结构中的dao层框架,在dao层对数据库进行crud操作,使用hibernate框架实 ...