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. HDU4662(SummerTrainingDay03-B)

    MU Puzzle Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  2. 在线报表设计实战系列 – 制作多Y轴组合图表（8）

    葡萄城报表是一套强大的报表开发和系统搭建工具,既能与您开发的报表软件项目紧密集成,也可独立部署运行,支持多数据源,具有无编码.灵活.稳定等特性,可以帮您快速搭建专业的报表软件系统,实现各类报表的设计. ...

  3. 绝对良心提供百度网盘的jdk1.8源码下载包含sun包的

    但是openjdk网站有提供的: http://hg.openjdk.java.net/jdk8u/jdk8u/jdk/file/6bfaecb8ff77/src/share/classes/ 或者直 ...

  4. EntityFramework 贪婪加载与延迟加载以及资源回收

    EntityFramework的资源回收 1) Using 内包含Entity的上下文关系,对俩表做Add操作,最好可以直接写一个 entity.SaveChanges(); 完成两张表的同时add操 ...

  5. T-SQL查询两个日期之间的休息日（周六周日）天数

    SELECT COUNT(*) FROM MASTER..SPT_VALUES WHERE TYPE = 'P' AND DATEADD(DAY,NUMBER,'2014-03-13')<='2 ...

  6. The current identity ( XXXX) does not have write access to ‘C:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files’.解决办法

    环境windows 2008+IIS 7 找到 C:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET FilesTempora ...

  7. 推荐linux下的数据库开发工具DBeaver 开源免费

    linux下不错的数据库管理工具 DBeaver 操作比较友好,基于eclipse.使用jdbc链接,链接数据库非常全(oracle mysql mssql sqlite  常见的统统支持).而且可以 ...

  8. NGUI和UGUI图片字 艺术字(Bitmap图片转文字)制作方法

    用图片字而不是图片 美术和程序的配合,需要程序能够很快抓住问题重点并提出解决方案.美术出的图片字比我们使用的字体更好好看,那么是否要一个个图片去拼成数字呢? NGUI创建图片字 准备材料 美术提供的数 ...

  9. 乘风破浪：LeetCode真题_031_Next Permutation

    乘风破浪:LeetCode真题_031_Next Permutation 一.前言 这是一道经典的题目,我们实在想不出最好的方法,只能按照已有的方法来解决,同时我们也应该思考一下为什么要这样做?是怎么 ...

  10. openlayer3 基础学习一创建&显示地图

    <!doctype html> <html lang="en"> <head> <link rel="stylesheet&qu ...