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. c语言的全排列

    在c语言中实现全排列,对于刚接触c语言,还没学习算法的人来说,比较困难了吧.估计大佬也不会看这种基础的东西,全排列实现的办法很多,在c++中有一个专门的函数可以使用,但是在c中实现就有点困难了.如果你 ...

  2. PHP统计二维数组个数

    count($arr) $arr = [ ['id'=>1,'name'=>'Tom'], ['id'=>2,'name'=>'Sun'], ['id'=>3,'name ...

  3. [PHP] 内部接口简单加密验证方式

    1. 当有内部系统之间进行调用的时候,也需要简单的进行一下调用方的验证,一种简单的内部接口加密验证方式.此加密方式需要三个参数,分别是api地址,pin码,entry标识,其中pin和entry是接口 ...

  4. 配置docker服务器支持远程连接

    操作系统:linux-ubuntu 参考文档:https://cloud.tencent.com/developer/article/1047265 采用上述文档:非安全的连接方式/服务端配置/通常的 ...

  5. [android]system.img文件的打包和解包

    1:system.img的两种格式 system2_0.img: Linux rev 1.0 ext4 filesystem data, UUID=57f8f4bc-abf4-655f-bf67-94 ...

  6. 03-flex-wrap是否换行

     flex-wrap:运用到父元素上 结合 display: flex; flex-wrap: wrap; 换行 flex-wrap: nowrap; 不换行 #main { width: 300px ...

  7. C++学习三 模板类出错总结（Missing template arguments before 'L'）

    一.模板类的说明 模板类有一个好处是可以放宽你输入的数据类型. 比如有这样的一个函数: int add(int x, int y) { return x+y; } 这个函数对于int类型的x,y才适合 ...

  8. 使用DRF来快速实现API调用服务

    本帖最后由 范志远 于 2019-3-19 16:55 编辑 增加加载Djagno REST Framework模块的选项 对于settings.py文件的INSTALLED_APPS增加'rest_ ...

  9. monkey事件

    一.操作事件简介 monkey所操作的随机事件流中包含11大事件,分别是触摸事件.手势事件.二指缩放事件.轨迹球事件.屏幕旋转事件.基本导航事件.主要导航事件.系统按键事件.启动activity事件. ...

  10. CF1207F Koala and Notebook（BFS）

    你可能会好奇为什么只有一个 BFS 的标签,却还能够排到 F 的位置. 因为它实在是太 简 单 了 有更新 首先,比较两个数,可以先比较两个数的长度,然后比较两个数看成数字串后的字典序. 不妨先把每条 ...