<!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. 【02】HTML5与CSS3基础教程（第8版）（全）

    [02]HTML5与CSS3基础教程(第8版)(全)   共392页.   (魔芋:大体上扫了一遍.没有什么新东西,都是入门的一些基础知识.) 已看完.       [美]elizabeth cast ...

  2. CC3200 TI 笔记

    I2C I2C总线是由Philips公司开发的一种简单.双向二线制同步串行总线.它只需要两根线即可在连接于总线上的器件之间传送信息. I2S I2S(Inter-IC Sound)总线, 又称 集成电 ...

  3. Selenium打开谷歌浏览器提示chromedriver.exe停止运行且浏览器显示请关闭开发者模式

    提示关闭开发者模式,其实是chromedriver.exe与chrome 浏览器版本不一致导致的, 查看浏览器版本方法  在浏览框输入,chrome://version/. 显示是 Google Ch ...

  4. 九度oj 题目1192：回文字符串

    题目1192:回文字符串 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:4391 解决:2082 题目描述: 给出一个长度不超过1000的字符串,判断它是不是回文(顺读,逆读均相同)的. ...

  5. mysql replication driver 在jdk1.6下失效问题解决

    mysql diver包里有relication driver,可以在jdbc层进行读写分离,主写从读默认的配置方式是指定driver为ReplicationDriver,并改写jdbc url一起j ...

  6. JPA的一些坑

    推荐一篇比较好的介绍JPA的文章:使用 Spring Data JPA 简化 JPA 开发 JPA坑1:不支持Limit查询 JPA是不支持Limit分页查询,而我们有时又因为某些原因不想用JPA提供 ...

  7. zoj2853 Evolution

    给定一个进化的矩阵图,问在m次之后最终的物种有多少个,实际上这和线性代数及其应用里的一个例题是一样的...总之就相当于煞笔的套个矩阵不断去乘m次,然后每次都会根据得到进化后各物种的个数,矩阵快速幂求一 ...

  8. Ionic3 填坑记录 - java.lang.RuntimeException: java.lang.RuntimeException: com.android.builder.dexing.DexArchiveMergerException: Unable to merge dex

    1  错误:Unable to merge dex 执行打包命令时 ionic cordova build android --prod 报如下错误 2 原因 重复引用了同一个包 如上图所示, com ...

  9. ArcGIS for Android入门程序之DrawTool2.0

    来自:http://blog.csdn.net/arcgis_mobile/article/details/8084763 GISpace博客<ArcGIS for Android入门程序之Dr ...

  10. Django学习系列之结合ajax

    AJAX简介 什么是AJAX AJAX = 异步JavaScript 和 XML(Asynchronous JavaScript and XML) 通过在后台于服务器进行少量数据交换,AJAX可以使网 ...