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. Python—五大基本语句

    五大基本语句 赋值语句(变量.对象.赋值运算符) 输入输出语句(input,print函数) 条件判断语句(if-elif-else语句) 循环语句(遍历循环for-in-else.条件循环while ...

  2. [Php] windows下使用composer出现SHA384 is not supported by your openssl extension

    composer的版本太低了,需要更新composerwindows的安装使用https://getcomposer.org/Composer-Setup.exe报这个错Failed to decod ...

  3. 『008』Zabbix

    『006』索引-Monitoring Zabbix [001]- 点我快速打开文章[001-Zabbix 服务安装] [002]- 点我快速打开文章[002-Zabbix 前端配置] 更新中

  4. c# 第32节 类的继承

    本节内容: 1:为什么要继承 2:继承特点 3:继承的实现 4:子类传统构造,与base构造 1:为什么要继承 2:继承特点 什么是继承: 继承就是子类包含父类的数据结构和行为方式, 包括字段.属性. ...

  5. 爬虫之爬取豆瓣图书名字及ID

    from urllib import request from bs4 import BeautifulSoup as bs #爬取豆瓣最受关注图书榜 resp = request.urlopen(' ...

  6. Educational Codeforces Round 78 (Rated for Div. 2) --补题

    链接 直接用数组记录每个字母的个数即可 #include<bits/stdc++.h> using namespace std; int a[26] = {0}; int b[26] = ...

  7. PKCS pfx cer x509

    PKCS pfx cer x509 参考 PKCS 15 个标准 PKCS The Public-Key Cryptography Standards (PKCS)是由美国RSA数据安全公司及其合作伙 ...

  8. Eclipse中如何安装Git插件

    现在的Eclipse一般都自带Git插件. 检查Eclipse是否有Git插件: 方法一:Help—>About Eclipse,出现下面的图标,说明Eclipse中已有Git插件,就不用安装了 ...

  9. html各种弹出框和提示框

    控制台输出 console.log() console.info() confirm() alert() promt()   提示对话框

  10. 正睿暑期培训day1考试

    链接 A 理解一下题意,然后玩几组样例就能发现,实际上就是\(k\)个\(i\)等价于\(1\)个\(i-1\).所以就类似于\(k\)进制进行进位,如果最后\(0\)位上不是\(0\),那么就存在划 ...