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. Linux中LVM逻辑卷管理

    一.简介 LVM是逻辑盘卷管理(Logical Volume Manager)的简称,它是Linux环境下对磁盘分区 进行管理的一种机制,LVM是建立在硬盘和分区之上的一个逻辑层,来提高磁盘分区管理的 ...

  2. 网络爬虫之使用pyppeteer替代selenium完美绕过webdriver检测

    1引言 曾经使用模拟浏览器操作(selenium + webdriver)来写爬虫,但是稍微有点反爬的网站都会对selenium和webdriver进行识别,网站只需要在前端js添加一下判断脚本,很容 ...

  3. Eclipse修改JSP文件的默认编码

    Eclipse新建JSP文件,可以看到默认使用的是ISO-8859-1编码,如下图,而这种编码是无法保存中文的,不符合我们的需求 那么应该怎样修改呢?找到菜单Window-Preferences,找到 ...

  4. Pycharm 2019 添加 docker 解释器

    打开docker的tls

  5. 201271050130-滕江南-《面向对象程序设计（java）》第十三周学习总结

      201271050130-滕江南-<面向对象程序设计(java)>第十三周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daiz ...

  6. mysql 插入表情数据报错

    mysql 插入表情数据报错 1.编码类型改成:utf8mb4 2.连接类型也要改成:utf8mb4_general_ci 3.在每个保存的前面执行一次 self.cursor.execute('SE ...

  7. python将xml文件数据增强（labelimg）

    在处理faster-rcnn和yolo时笔者使用labelimg标注图片 但是我们只截取了大概800张左右的图,这个量级在训练时肯定是不够的,所以我们需要使用数据增强(无非是旋转加噪调量度)来增加我们 ...

  8. cookie：

    Django Django处理一个请求的流程 在浏览器的地址栏中输入地址,回车,发了一个GET请求 wsgi模块接收了请求,将请求的相关信息封装成request对象 根据地址找到对应函数 执行函数获取 ...

  9. 【Eureka篇三】Eureka自我保护机制（3）

    1. 自我保护机制演示 eureka在频繁修改微服务名称的时候,可以会出现如下现象: 2. 什么是自我保护模式? 默认情况下,如果EurekaServer在一定时间内没有接收到某个微服务实例的心跳,E ...

  10. MySQL SQL DLL (数据定义语言)

    CREATE CREATE DATABASE CREATE DATABASE 用于创建数据库 CREATE DATABASE new_database_name; CREATE TABLE CREAT ...