<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <link rel="stylesheet" href="node_modules\bootstrap\dist\css\bootstrap.css">

</head>

<body>

    <div id="app">

        <!-- bootstrap  基本样式+增强样式-->

        <div class="container">

            <div class="row">

                <h2 class="text-warning">购物车</h2>

                <table class="table table-hover table-bordered">

                    <tr>

                        <th>全选 <input type="checkbox" v-model="checkAll"></th>

                        <td>商品</td>

                        <td>单价</td>

                        <td>数量</td>

                        <td>小计</td>

                        <td>操作</td>

                    </tr>

                    <!-- 括号与in之间要加空格不然会语法错误 -->

                    <tr v-for="(product,index) in products">

                        <td><input type="checkbox" v-model="product.isSelected"></td>

                        <!-- 使用vue指令动态绑定图片的相关信息 -->

                        <td><img :src="product.productCover" :title="product.productName"

                                alt="1">{{product.productName}}</td>

                        <td>{{product.productPrice}}</td>

                        <td><input type="number" min="1" v-model.number.lazy="product.productCount"

                                onkeyup="this.value=this.value.replace(/\D|^0/g,'')"

                                onafterpaste="this.value=this.value.replace(/\D|^0/g,'')"></td>

                        <!-- 通过过滤器展示更好地效果 -->

                        <td>{{product.productCount*product.productPrice | toFixed(2)}}</td>

                        <td><button type="button" class="btn btn-danger" @click='removes(product)'>删除</button></td>

                    </tr>

                    <tr>

                        <td colspan="6">总价格：{{sum | toFixed(2)}} </td>

                    </tr>

                </table>

            </div>

        </div>

    </div>

</body>

<!-- vue基于依赖关系引入位置放哪都行 -->

<script src="node_modules\axios\dist\axios.js"></script>

<script src="node_modules\vue\dist\vue.js"></script>

<script>

    let vm = new Vue({

        el: '#app',

        // 当给全选赋值时应要影响其他人的变化，当页面刷新时，时根据下面的

        // checkbox计算出来的结果给全选赋值

        computed: { //放在computed中最后也会放在vm上，不能与methods等重名

            checkAll: {

                //当products变化会重新计算

                get() { //get和set this指向实例，v-model会获取checkAll得值，会调用get方法

                    return this.products.every(p => p.isSelected);

                },

                set(val) { //当我们给checkbox赋值的时候调用,val等于checkAll的值

                    this.products.forEach(p => p.isSelected = val)

                }

            },

              //sum的值会被缓存

            sum() { //将计算属性写成函数则默认调用get

                return this.products.reduce((pre, next) => {

                    if (!next.isSelected) return pre;

                    return pre + next.productPrice * next.productCount;

                }, 0)

            }

        },

        filters: {

            toFixed(input, num) { //第二个参数为小数点个数

                return '￥' + input.toFixed(num);

            }

        },

        //专门用来发送AJAX的方法

        created() { //数据初始化会被调用，this指向的也是vm实例，钩子函数

            this.getData();

        },

        data: {

            products: [],

        },

        methods: {

            removes(p) {

                this.products = this.products.filter(item => item !== p);

            },

            getData() {

                axios.get(

                        'https://www.easy-mock.com/mock/5d537a1cf651bc6ff265fb77/example/result/cart.json')

                    .then((res) => {

                        this.products = res.data.data; //这里需要根据自己用的接口返回的数据来赋值

                        // console.log(res.data);

                    }).catch((err) => {

                        console.log(err); //这里应使用箭头函数，this才能指向vm实例

                    });

            }

        }

    });

</script>

</html>

//这里使用的是本地的资源文件，如果需要使用，请将代码内的资源文件用CDN引入

基于vue的购物车清单的更多相关文章

  1. 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

    基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...

  2. 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core，如何

    基于 Vue.js 之 iView UI 框架非工程化实践记要   像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引 ...

  3. 基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室

    一.项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目.界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5.小程序.Ap ...

  4. 基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1]

    基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1] 原文:基于Vue JS, Webpack 以及Material Design的渐进式web应 ...

  5. 在微信框架模块中，基于Vue&Element前端的事件和内容的管理

    在微信后台管理中,我们需要定义好菜单对应的事件管理,因为微信通过菜单触发相关的事件,因此菜单事件的响应关系,我们如果处理好,就能构建出我们的微信应用入口了.通过入口,我们可以响应用户菜单的事件,如响应 ...

  6. 基于Vue+Vuex+iView的电子商城网站

    MALL-VUE 这是一个基于VUE + VUEX + iView做的一个电商网站前端项目, 附带前后端分离实现版本(在forMallServer分支),欢迎fork或star 项目地址: https ...

  7. Vue实战-购物车案例

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

  8. 一次基于Vue.Js用户体验的优化

    .mytitle { background: #2B6695; color: white; font-family: "微软雅黑", "宋体", "黑 ...

  9. 发布自己第一个npm 组件包（基于Vue的文字跑马灯组件）

    一.前言 总结下最近工作上在移动端实现的一个跑马灯效果,最终效果如下: 印象中好像HTML标签的'marquee'的直接可以实现这个效果,不过 HTML标准中已经废弃了'marquee'标签 既然HT ...

随机推荐

  1. python方法未绑定错误

    相信 Python 程序员多多少少都和我一样遇到过 Method Unbound Error,直译过来就是 “方法未绑定错误”,虽然搜索之后知道了使用 @classmethod 这样的装饰起后就可以解 ...

  2. NewLife.XCode 上手指南

    想了解什么是XCode 在这里我不对XCode做过多介绍,XCode曾经是一个轻量级ORM组件,现在是一个重量级数据映射框架,支持实体对象数据到不同媒体的数据映射,提供面向对象的方式操作数据库,解决9 ...

  3. 002-创建型-05-原型模式（Protype）

    一.概述 指原型实例指定创建对象的种类,并通过克隆这些原型创建新的对象 原型模式就是让类实现Cloneable接口,达到克隆原型类的方式. 1.1.适用场景 1.在创建对象的时候,我们不只是希望被创建 ...

  4. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_10-SpringSecurityOauth2研究-校验令牌&刷新令牌

    3.5校验令牌 Spring Security Oauth2提供校验令牌的端点,如下: Get: http://localhost:40400/auth/oauth/check_token?token ...

  5. 清空表且id为0

    sql命令: 用于清空某表的数据 且让自增的id重新从0开始 truncate table

  6. 123457123456#0#-----com.threeapp.ErTongPaint01-----儿童宝宝绘画涂鸦游戏02

    com.threeapp.ErTongPaint01-----儿童宝宝绘画涂鸦游戏02

  7. MySQL学习笔记——MySQL5.7的启动过程（一）

    MySQL的启动函数在 sql/main.cc 文件中. main.cc: extern int mysqld_main(int argc, char **argv); int main(int ar ...

  8. react中如何实现一个按钮的动态隐藏和显示（有效和失效）

    初始准备工作 constructor(props) { super(props); /* * 构建导出数据的初始参数,结合用户下拉选择后动态设置参数值 * */ this.state = { btnS ...

  9. git 创建标签推送远程分支

    目录 git 创建标签推送远程分支 查看tag 创建tag 推送标签到远程仓库 删除tag git 创建标签推送远程分支 标签概念: tag, 对于迭代频繁的项目. 每一个标签可以理解为一个版本. 创 ...

  10. 关于React的脚手架

    Rewire你的应用 https://ant.design/docs/react/use-with-create-react-app-cn create-react-app (官方脚手架 简称cra) ...