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. hadoop学习之hdfs文件系统

    一.hdfs的概念 Hadoop 实现了一个分布式文件系统(Hadoop Distributed File System),简称HDFS. Hadoop是Apache Lucene创始人Doug Cu ...

  2. html前端学习

    html : 1.相当于没有穿衣服的人,一套浏览器认识的规则, 2.开发者: 学习html规则 开发后台程序: -写html文件(充当模板) -数据库获取数据,然后替换到html文件的指定位置(web ...

  3. EasyUI动态改变输入框width

    function changeEUIBoxWidth(id, width){ $('#'+id).parent().find($('span:eq(0)')).css('width',width+'p ...

  4. element-ui input组件源码分析整理笔记（六）

    input 输入框组件 源码: <template> <div :class="[ type === 'textarea' ? 'el-textarea' : 'el-in ...

  5. Django中Ajax提交数据的CSRF问题

    错误信息: Forbidden (CSRF token missing or incorrect.): 什么是CSRF: django为用户实现防止跨站请求伪造的功能,通过中间件 django.mid ...

  6. django 关于render的返回数据

    1,问题探讨 : 通过ajax 发送请求,接受render返回的数据.到底是什么样的类型呢? def text(request): # v = reverse("test") # ...

  7. AJAX删除事件与加载数据

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. SQLServer 事物与索引

    SqlServer 事物与索引 分享by:授客 QQ:1033553122 详情点击百度网盘分享链接: SqlServer 事物与索引.ppt

  9. 稳聘App设计图分享

    摘要||潜心学习,无限开源,我是鸟窝,一只憨厚的鸟,联系我加微信:jkxx123321 很早期就想筹划上线一款招聘类App,一拖再拖,先做还没有上线. 下面的设计原图,为我UI徒弟所做,在此,表示万分 ...

  10. go语言练习：类型转换

    package main import "fmt" func main() { var a int var b uint var c float32 var d float64 a ...