index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>购物车</title>
        <link rel="stylesheet" href="index.css" />
    </head>
    <body>
<div id="app">
    <table>
        <thead>
            <tr>
                <th>商品ID</th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
        </thead>
        
        <tbody>
        <template v-if="list.length===0">
            <tr class="empty">
                <td colspan="5">还没有购物，请尽情添加吧！</td>
            </tr>
        </template>
        
        <template v-else>
            <tr v-for="(item,index) in list">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price|formatPrice}}</td>
                <td>
                    <button :disabled="item.count===1" @click="handleMinus(index)">-</button>
                    <input type="text" v-model="item.count"/>
                    <button @click="handleAdd(index)">+</button>
                </td>
                <td>
                    <button type="button" @click="handleRemove">删除</button>
                </td>
                </tr>
        </template>
        </tbody>
    
    <tfoot>
        <tr>
            <td colspan="5">共{{list.length}} 件商品，总计：{{totalPrice|formatPrice}}元</td>
        </tr>
    </tfoot>
    </table>
</div>
        <script src="vue.js"></script>
        <script src="mock.js"></script>
        <script src="index.js"></script>
    </body>
</html>

index.js

var app = new Vue({
    el: "#app",
    data: {
        list: []
    },
    created: function() {
        var data = Mock.mock({
            "list|1-10": [{
                "id": "@integer(1001,9999)",
                "name": "@String(10,20)",
                "price": "@integer(100,999)",
                "count": "@integer(1,10)"
            }]
        });
        this.list = data.list;
    },
    methods: {
        handleMinus: function(index) {
            var item = this.list[index];
            item.count--;
        },
        handleAdd: function(index) {
            var item = this.list[index];
            item.count++;
        },
        handleRemove: function(index) {
            this.list.splice(index, 1);
        }
    },
    computed: {
        totalPrice: function() {
            var sum = 0;
            for (var i = 0; i < this.list.length; i++) {
                var item = this.list[i];
                sum += (item.price * item.count);
            }
            return sum;
        }
    },
    filters: {
        formatPrice: function(price) {
            price = price.toString();
            //将输入的数字转换为字符串
            if (/^-?\d+\.?\d+$/.test(price)) {
                //判断输入内容是否为整数或小数
                if (/^-?\d+$/.test(price)) {
                    //判断输入内容是否为整数
                    price = price + ",00";
                    //将整数转为精度为2的小数，并将小数点换成逗号
                } else {
                    price = price.replace(/\./, ',');
                    //将小数的小数点换成逗号
                }
                while (/\d{4}/.test(price)) {
                    // 判断是否有4个相连的数字，如果有则需要继续拆分，否则结束循环；
                    //      将4个相连以上的数字分成两组，第一组$1是前面所有的数字（负数则有符号），
                    //      第二组第一个逗号及其前面3个相连的数字；
                    //       将第二组内容替换为“,3个相连的数字，”
                    price = price.replace(/(\d+)(\d{3}\,)/, '$1,$2');
                }
                price = price.replace(/\,(\d*)$/, '.$1'); //将最后一个逗号换成小数点
            }
return "￥"+ price;
        }
    }

})

index.css

*{margin: 0;padding: 0;}

table{
    width: 800px;
    margin: 0 auto;
    border-spacing: 0;
}

thead{
    background: #EFEFEF;
}

table,th,td{
    border: 1px solid #CCCCCC;
}

th,td{
    padding: 10px 20px;
}

.empty{
    text-align: center; color: #FFA500;
}

Vue购物车的更多相关文章

  1. Vue购物车实例

    <div class="buyCarBox" id="buyCarBox" v-cloak> <div class="haveClo ...

  2. vue 购物车练习

    本人看了vue官网上的教程后,感觉对vue的依稀有点了解,决定动手练习个小功能项目,就找了购物车本项目.原文链接:http://blog.csdn.net/take_dream_as_horse/ar ...

  3. vue购物车和地址选配（三）

    参考资料:vue.js官网 项目演示: 项目源代码: 核心代码及踩坑 删除: new Vue({ el:'#app', data:{ productlist:[], totalMoney:0, che ...

  4. vue购物车功能源码

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...

  5. VUE购物车示例

    代码下载地址:https://github.com/MengFangui/VueShoppingCart 1.index.html <!DOCTYPE html> <html lan ...

  6. vue购物车的实现

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. vue购物车动画效果

    使用动画的三个函数 v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter=&q ...

  8. 第八十三篇：Vue购物车(四) 总价计算

    好家伙, 1.总价计算 来了,又先是一波分析: 我们用一个计算属性amt 我们把item中被勾选的项用一个过滤器过滤器来 然后用一个循环相加,把商品的价格乘以商品的数量, 把这个总值返回出去, 然后组 ...

  9. 第八十二篇：Vue购物车(三) 实现全选功能

    好家伙, 继续完善购物车相应功能 1.如何实现全选和反全选 1.1.全选框的状态显示(父传子) 来一波合理分析: 在页面中,有三个商品中 三个商品中的第二个未选择, 我么使用一个计算属性(fullSt ...

随机推荐

  1. Linux常用基本命令wc-统计文件的字节,字符,行数

    wc命令 作用:统计文件的字节,单词,行数 用法:wc [option] [file] -c:统计字节 ghostwu@dev:~/linux/uniq$ cat ghostwu.txt 192.16 ...

  2. Into outfile禁用情况下另类方法拿webshell

    首先环境如下: OS:Windows 2003 WAF:Safe Dog 4.0正式版 phpmyadmin:4.7(许多都可以) Mysql:5.5+ PHP:5.3 Apache:2.x 总结方法 ...

  3. JNDI 与 LDAP

    对于众多接口服务.协议.互联网名称,总会遇到感到熟悉,但是时间一长就会忘记,所以还是要自己整理一下,加强记忆,当然最好的方式还是动手实践. JNDI : 全称:JAVA NAMING AND Dire ...

  4. css 文本两行显示，超出省略号表示

     重点:text-overflow: ellipsis;只对display:inline:起作用 例子: <span class="a">我说说<b class= ...

  5. 前端开发笔记（4）css基础（下）

    标签定位 相对定位 相对定位是用来微调元素位置的,让元素相对于原来的位置进行调整. <head> <meta http-equiv="Content-Type" ...

  6. 自定义适用于手机和平板电脑的 Dynamics 365(五)：可视控件

    使用 适用于手机的 Dynamics 365 和平板电脑中的可视控件帮助移动用户更快地输入 Dynamics 365 数据并提供更丰富的可视体验. 此组自定义控件包括滑块.开关.星数评级.视频嵌入以及 ...

  7. Flutter 图片如何充满父布局

    正常我们需要显示一张图片,会用到Image这个控件.打个比方,我们加载一张本地的图片,先看一下这个Image.asset的源码: Image.asset(String name, { Key key, ...

  8. Azure 元数据服务：适用于 Windows VM 的计划事件（预览）

    计划事件是 Azure 元数据服务中的其中一个子服务. 它负责显示有关即将发生的事件(例如,重新启动)的信息,使应用程序可以为其做准备并限制中断. 它可用于所有 Azure 虚拟机类型(包括 PaaS ...

  9. 如何在 Azure 中标记 Windows 虚拟机

    本文介绍在 Azure 中通过 Azure 资源管理器标记 Windows 虚拟机的不同方式.标记是用户定义的键/值对,可直接放置在资源或资源组中.针对每个资源和资源组,Azure 当前支持最多 15 ...

  10. [SQLServer大对象]——FileTable初体验 （转载）

    阅读导航启用FILESTREAM设置更改FILESTRAM设置启用数据库非事务性访问级别FileTable 在我接触FileTable之前,存储文件都是存储文件的链接和扩展名到数据,其实并没有实际的把 ...