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. js字符串如何倒序

    1. var reverse = function( str ){ var newStr = '', i = str.length; for(; i >= 0; i--) { newStr += ...

  2. ubuntu 18.04 设置固定ip

    # This file is generated from information provided by # the datasource.  Changes to it will not pers ...

  3. 【代码笔记】iOS-二维码

    一,工程图. 二,代码. ViewController.m #import "ViewController.h" #import "ScanViewController. ...

  4. flex兼容性问题

    flex在众多手机浏览器上的兼容方案(亲测华为手机自带浏览器) 如果项目使用构建工具,可加autoprefixer来处理,[autoprefixer使用指南] 纯手写css兼容代码,需给每个使用的属性 ...

  5. ajax分页查询

    (1)先写个显示数据的页面,分页查询需要那几个部分呢? 1.首先是查询的文本框输入,还有查询按钮,那么就开始写代码吧 1 2 3 4 <div> <input type=" ...

  6. Flex自动回收导致监听不到ModuleEvent.READY事件

    Flex中可以动态载入模块,以达到延迟加载,减小主程序体积的效果.通常可以使用如下代码: var iminfo:IModuleInfo = ModuleManager.getModule(" ...

  7. spring-quartz定时任务初探

    最近有关定时任务的需求还蛮多的,我这里呢用的是最简单的用法,后续了解更深层次的用法来优化目前的代码. 首先就是引入相关jar    quartz-1.6.4.jar  spring的jar就不说了 接 ...

  8. JAVA将list转化为xml文件

    pojo类: public class TreeNode { private int id; private String nodeId; private String parentId; priva ...

  9. 在Docker Swarm上部署Apache Storm：第1部分

    [编者按]本文来自 Baqend Tech Blog,描述了如何在 Docker Swarm,而不是在虚拟机上部署和调配Apache Storm集群.文章系国内 ITOM 管理平台 OneAPM 编译 ...

  10. Python习题（第3课）

    一.独一无二的路 从前有一只小小的机器人叫小器,小器站在一个M*N的格子地板的最左上角,很孤单,世界辣么大,它也想去看看,经过不懈的努力它终于可以(只能)向下或者向右移动啦,它有一个宏伟的愿望就是要穿 ...