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. Three.js开发指南---使用高级几何体和二元操作（第六章）

    本章的主要内容: 一,高级几何体-凸面体ConvexGeometry,扫描体LatheGeometry,管状几何体TubeGeometry: 二,使用拉伸几何体ExtrudeGeometry将一个二维 ...

  2. 前端开发笔记（3）css基础（中）

    上一篇中我们学习了html的标准文档流,下面我们先来看看如何脱离标准流. 脱离标准流 css中一共有三种方法脱离标准流 浮动 绝对定位 固定定位 浮动 我们要搞清楚什么是浮动,先来看一个标准文档流的例 ...

  3. SQLServer 学习笔记之超详细基础SQL语句 Part 10

    Sqlserver 学习笔记 by:授客 QQ:1033553122 -----------------------接Part 9------------------- 删除约束的语法 ALTER T ...

  4. Hadoop 客户端问题

    错误: log4j:WARN See http://logging.apache.org/log4j/1.2/faq.html#noconfig for more info.Exception in ...

  5. [iOS] UICollectionView实现图片水平滚动

    最新更新: 简单封装了一下代码,参考新文章:UICollectionView实现图片水平滚动 先简单看一下效果: 新博客:http://wossoneri.github.io 准备数据 首先先加入一些 ...

  6. 【Java入门提高篇】Day4 Java中的回调

    又忙了一周,事情差不多解决了,终于有可以继续写我的博客了(各位看官久等了). 这次我们来谈一谈Java里的一个很有意思的东西——回调. 什么叫回调,一本正经的来讲,在计算机程序设计中,回调函数是指通过 ...

  7. javascript获取网页各种高宽及位置总结

    screen对象 获取屏幕的高宽(分辨率) screen.width //屏幕的宽 screen.height //屏幕的高 screen.availWidth //屏幕可用宽度 屏幕的像素高度减去系 ...

  8. h5页面调用摄像头(简易版)

    <input type="button" value="OpenVideo" id="btnOpenVideo" /> < ...

  9. javascript中注册和移除事件的4种方式

    对于html中的一些元素注册事件的方式有多种 第一种: 复制代码代码如下: <script> function test() { alert("OK"); } < ...

  10. Python编写API接口

    要求通过http://192.168.50.74/aptest/calc/?a=aa&c=00&b=bb进行访问,参数a="aa",b="bb" ...