购物车列表渲染

本贴最后更新于 1854 天前,其中的信息可能已经事过景迁

1.将 mock 文件夹放入 public 文件夹,模仿后台,这个时候可以通过/mock/cart.json 的方式访问到相应的 json 文件,但是要注意把浏览器地址栏的#删掉,要不然是访问不到的。
2.用 axios 访问后台拿数据,因为现在没有后台,就用 mock 来模拟一个。这里为什么安装 vue-axios 这个插件呢。首先如果不用这个插件,那么就需要在使用 axios 的时候提前导入,例如

import axios from "axios"

然后通过,axios.get(),里边里边的参数为访问地址,例如 https://api/v1/getlist
但是如果采用了 vue-axios 这个组件,那么 vue 会把 axios 封装成为一个 vue 对象,那么通过 this 就可以直接访问的到,不需要再引入 axios 这个组件了。如下方式

this.axios.get();

3.如何获取 axios 返回的数据,如:
这里是第一种方式,这样的嵌套函数是没有作用域的,所以在函数内部也可以使用 this,如果没有这个,而采取的第二种方式

this.axios.get("/mock/cart.json").then((response) => {
                    window.console.log(response);
                });

这种方式会有作用域的概念,即在函数中就不能使用 this 了,这个地方可以类比与微信小程序中,必须在外部将 this 指针保存成一个 that 才能在内部使用。

this.axios.get("/mock/cart.json").then(function(response){
                    window.console.log(response);
                });

取出里边的数据基本上是和小程序一致的,

this.axios.get("/mock/cart.json").then((response) => {
                    window.console.log(response);
                    let res = response.data;
                    this.cartList = res.data;
                });

4.列表渲染
v-for 指令,写到要循环渲染的那个标签上,item in cartList,那么 item 就是那个数组里的一个元素
绑定 src 属性:

<img v-bind:src="'/imgs/' + item.productImage">

绑定文字:

<div class="item-name">{{item.productName}}</div>

内部赋值计算

<div class="item-price-total">¥{{item.productNum*item.productPrice}}元</div>

绑定 class

<a href="javascipt:;" class="checkbox-btn item-check-btn" v-bind:class="{'checked':item.checked}">

v-for 指令后加上 id,提高渲染效率

<li v-for="item in cartList" v-bind:key="item.productId">
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    266 引用 • 665 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • someone
    作者

    今天重新遇到了 axios,应该是作用域的问题,在 then 如果采用=》的方式,就可以在函数内部接着用 this 关键字,否则就必须在外部先保存一下 this 关键字

  • image.png 我的是这样写的

  • someone
    作者

    是的,这样就可以在内部直接使用 this 对象了

推荐标签 标签

  • 友情链接

    确认过眼神后的灵魂连接,站在链在!

    24 引用 • 373 回帖
  • RESTful

    一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。

    30 引用 • 114 回帖 • 2 关注
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    52 引用 • 228 回帖
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据。 这种动作(网页浏览,搜索和其他用户的行动)是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖
  • danl
    132 关注
  • 强迫症

    强迫症(OCD)属于焦虑障碍的一种类型,是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病,其特点为有意识的强迫和反强迫并存,一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖
  • 自由行
    10 关注
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖
  • 工具

    子曰:“工欲善其事,必先利其器。”

    286 引用 • 729 回帖
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    53 引用 • 37 回帖
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 638 关注
  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    209 引用 • 2031 回帖
  • 安装

    你若安好,便是晴天。

    132 引用 • 1184 回帖
  • HHKB

    HHKB 是富士通的 Happy Hacking 系列电容键盘。电容键盘即无接点静电电容式键盘(Capacitive Keyboard)。

    5 引用 • 74 回帖 • 471 关注
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 595 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。

    A second brain, for you, forever.

    15 引用 • 122 回帖
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖
  • Spring

    Spring 是一个开源框架,是于 2003 年兴起的一个轻量级的 Java 开发框架,由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构,分层架构允许使用者选择使用哪一个组件,同时为 JavaEE 应用程序开发提供集成的框架。

    944 引用 • 1459 回帖 • 17 关注
  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 384 回帖 • 8 关注
  • 职场

    找到自己的位置,萌新烦恼少。

    127 引用 • 1705 回帖 • 1 关注
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    91 引用 • 384 回帖
  • 深度学习

    深度学习(Deep Learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    53 引用 • 40 回帖 • 2 关注
  • Chrome

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    62 引用 • 289 回帖 • 1 关注
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识,提高团队的工作效率,让用户满意。

    3 引用 • 8 回帖 • 4 关注
  • 域名

    域名(Domain Name),简称域名、网域,是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位(有时也指地理位置)。

    43 引用 • 208 回帖
  • abitmean

    有点意思就行了

    29 关注