Html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link rel="stylesheet" href="./main.css">

</head>

<div id="app">

    <div v-if="books.length">

        <table>

            <thead>

                <tr>

                    <th></th>

                    <th>书籍名称</th>

                    <th>出版日期</th>

                    <th>价格</th>

                    <th>购买数量</th>

                    <th>操作</th>

                </tr>

            </thead>

            <tbody>

                <tr v-for="(item,index) in books">

                    <td>{{item.id}}</td>

                    <td>{{item.name}}</td>

                    <td>{{item.data}}</td>

                    <!-- <td>{{getFinalPrice(item.price)}}</td> -->

                    <td>{{item.price| showPrice}}</td>

                    <td>

                        <button @click="inc(index)" :disabled="item.count <=1 ">-</button>

                        {{item.count}}

                        <button @click="add(index)">+</button>

                    </td>

                    <td><button @click="removeHandle(index)">移除</button></td>

                </tr>

            </tbody>

        </table>

        <h2>总价格:{{totalPrice|showPrice}}</h2>

    </div>

    <h2 v-else>购物车为空</h2>

</div>

<body>

    <script src="../js/vue.js"></script>

    <script src="./main.js"></script>

</body>

</html>

CSS

table{

    border:1px solid #000;

    border-collapse: collapse;

    border-spacing: 0;

}

th,td{

padding: 8px 16px;

border:1px solid #000;

text-align:left;

}

th{

    background-color: #f7f7f7;

    color:#5c6b77;

    font-weight:600px;

}

JavaScript

const app = new Vue({

    el: '#app',

    data: () => ({

        books: [

            {

                id: 1,

                name: '《算法导论》',

                data: "2018-09-25",

                price: 89.00,

                count: 1

            },

            {

                id: 2,

                name: '《UNIX编程艺术》',

                data: "2018-09-25",

                price: 89.00,

                count: 1

            },

            {

                id: 3,

                name: '《编程珠玑》',

                data: "2018-09-25",

                price: 89.00,

                count: 1

            },

            {

                id: 4,

                name: '《JavaScript高级算法》',

                data: "2018-09-25",

                price: 89.00,

                count: 1

            },

            {

                id: 5,

                name: '《C++》',

                data: "2018-09-25",

                price: 89.00,

                count: 1

            }

        ],

    }),

    computed: {

        totalPrice: function () {

            // 1、

            // let totalPrice = 0

            // for (let i = 0; i < this.books.length; i++) {

            //     totalPrice +=this.books[i].price * this.books[i].count

            // }

            // return totalPrice

            // 2、

            // let totalPrice = 0;

            // for (let i in this.books) {

            //     totalPrice += this.books[i].price * this.books[i].count

            // }

            // return totalPrice

            // 3、

            let totalPrice = 0

            for (let item of this.books) {

                totalPrice += item.price * item.count

            }

            return totalPrice

        }

    },

    methods: {

        // getFinalPrice: (price) => {

        //     return '￥' + price.toFixed(2)

        // }

        add: function (index) {

            this.books[index].count++

        },

        inc: function (index) {

            this.books[index].count--

        },

        removeHandle: function (index) {

            this.books.splice(index, 1)

        }

    },

    filters: {

        showPrice: function (price) {

            return '￥' + price.toFixed(2)

        }

    }

})

注：文件文件位置

vue--购物车案例（小知识点总结）的更多相关文章

  1. vue 中的小知识点

    1)使用is解决小bug <!DOCTYPE html><html lang="en"> <head> <meta charset=&qu ...

  2. vue经验 - 细节小知识点汇总（更新中...）

    1. $refs 数据这么绑定的: 然后在created中抛出来,猜猜看看打印的是两个什么? 结果如下: 第一个跑出来了,第二个,却undefiend,没有东西?!... 后来去官网查看$refs的解 ...

  3. Vue(五) 购物车案例

    这一篇把之前所学的内容做一个总结,实现一个购物车样例,可以增加或者减少购买数量,可移除商品,并且购物车总价随着你的操作实时变化. 实现效果如图: 代码: <!DOCTYPE html> & ...

  4. Vue实战-购物车案例

    Vue实战-购物车案例 普通购物车 实现的功能:添加商品到购物车,计算总价 <!DOCTYPE html> <html lang="en"> <hea ...

  5. vue面试题，知识点汇总(有答案)

    一. Vue核心小知识点 1.vue中 key 值的作用 key 的特殊属性主要用在 Vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes.如果不使用key,Vue会使用一种最大限度减少动态 ...

  6. Vue一个案例引发「内容分发slot」的最全总结

    今天我们继续来说说 Vue,目前一直在自学 Vue 然后也开始做一个项目实战,我一直认为在实战中去发现问题然后解决问题的学习方式是最好的,所以我在学习一些 Vue 的理论之后,就开始自己利用业余时间做 ...

  7. Vue一个案例引发的递归组件的使用

    今天我们继续使用 Vue 的撸我们的实战项目,只有在实战中我们才会领悟更多,光纸上谈兵然并卵,继上篇我们的<Vue一个案例引发的动态组件与全局事件绑定总结> 之后,今天来聊一聊我们如何在项 ...

  8. 深入了解webpack前，可以了解的小知识点。

    阅读前:文章大概是写,简单用过webpack,想继续深入了解webpack前需要了解的知识.但文章内容跟webpack使用关系并不大. 文章概要: Object.defineProperty call ...

  9. vue入门 0 小demo (挂载点、模板、实例)

    vue入门 0 小demo  (挂载点.模板) 用直接的引用vue.js 首先 讲几个基本的概念 1.挂载点即el:vue 实例化时 元素挂靠的地方. 2.模板 即template:vue 实例化时挂 ...

  10. jQuery基础入门+购物车案例详解

    jQuery是一个快速.简洁的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多 ...

随机推荐

  1. Shell命令-用户用户组管理之visudo、sudo

    文件及内容处理 - visudo.sudo 1. visudo:编辑/etc/sudoers文件的专属命令 visudo命令的功能说明 visudo命令专门用来编辑/etc/sudoers这个文件的. ...

  2. nginx配置中root和alias的区别

    例:访问http://127.0.0.1/download/*这个目录时候让他去/opt/app/code这个目录找. 方法一(使用root关键字): location / { root /usr/s ...

  3. vue之tab切换

    <style> .active{ color: red; } div a{ display: block; } </style> <script src="ht ...

  4. 第50 课C++对象模型分析——成员变量（上）

    C++对象模型,其实就是C++中的对象在内存中是如何排布的.C++中的对象包含了成员变量和成员函数,其实就是研究C++中的类对象它的成员变量和成员函数在内存中是如何排布的. 回归本质class 是一种 ...

  5. 5、zabbix数据库分离

    环境: zabbix端:zabbix3.4(192.168.80.66) 数据库端:mysql5.7(192.168.80.88) 被监控端:web01(192.168.80.240) 为什么要将数据 ...

  6. Pwnable-collision

    一样的连接ssh,输入密码,查看文件 看看col.c的源码 #include <stdio.h> #include <string.h> unsigned long hashc ...

  7. C++ try catch 示例代码

    #include<iostream> void f1() { throw std::string("error happen"); } void f2() { try ...

  8. thinkphp的运行

    打开cmd切换到www目录下运行think E:\wamp64\www>php think run ThinkPHP Development server is started On <h ...

  9. vscode10个必装的插件

    VSCode 必装的 10 个高效开发插件   本文介绍了目前前端开发最受欢迎的开发工具 VSCode 必装的 10 个开发插件,用于大大提高软件开发的效率. VSCode 的基本使用可以参考我的原创 ...

  10. fiddler抓包-7-C端弱网测试

    前言大家平时也会发现我们有时候在地铁.高铁.电梯等等某个时候网络信号比较差导致网络延迟较大,这时是否有友好提示呢?甚至有可能发生崩溃等等...所以我们是可以通过fiddler来对web.APP.PC客 ...