【问题描述】

  把当前用户的购物车中(cartList),商品(good)选中字段checked = true的商品在订单页面中进行展示出来。

【一般做法】(两次循环)

  首先取出当前用户的购物车列表,循环里面的item,如果item=true,就把当前的商品加到orderList数组中,然后通过展示订单列表的DOM,通过v-if来对orderList数组进行展示出来。

这种作发明显使用了两个循环,一个循环是在方法里面循环,一个循环是在DOM中利用v-for进行循环。

<template>
<li v-for="item in orderList">
......
</li>
</template>
<script>
//第一步:获取当前用户购物车方法 return cartList
//第二步:遍历cartList,然后通过item = true 就把item存储到数组 orderList中
</script>

【代码优化】(一次循环)

  首先取出当前用户的购物车列表cartList数组,然后直接给DOM通过v-for来循环,再加一个条件,v-if=“item.checked===true”,满足就展示出来,代码如下:

<template>
<li v-for="item in cartList" v-if="item.checked === '1'">
......
</li>
</template>
<script>
//第一步:获取当前用户购物车方法 return cartList
</script>

  看到了吗,这里只运用了一次循环就能把【一般做法】的效果做出来!

【Vue.js】代码优化:在dom中加一行v-if就可少写一个循环类方法的更多相关文章

  1. Vue.js 在 webpack 脚手架中使用 cssnext

    Vue.js 的 webpack脚手架默认已经使用了 PostCSS 的 autoprefixer 的功能. 如果想使用下一代 css语法,即cssnext: 1. 安装依赖 npm install ...

  2. C++STL 中的容器整体/逐元素操作方法 少写80%for循环

    本文中示例代码默认已引用 std 命名空间 累加 (std::accumulate) accumulate(begin, end, init, op) 返回给定区间内元素的累加值与给定初值的和,初值不 ...

  3. Vue.js 子组件的异步加载及其生命周期控制

    前端开发社区的繁荣,造就了很多优秀的基于 MVVM 设计模式的框架,而组件化开发思想也越来越深入人心.这其中不得不提到 Vue.js 这个专注于 VM 层的框架. 本文主要对 Vue.js 组件化开发 ...

  4. js基础之DOM中元素对象的属性方法

    在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个    文档节点 . 所有的HTML元素都是    ...

  5. Vue.js笔记 — vue-router路由懒加载

    用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,这样就会更加高效,实现代码如下 ...

  6. vue.js在html页面中的使用

    1.加载vue.js,然后 var app = new Vue({ //vue代码})2.截图如下:

  7. js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象

    事件对象    在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...

  8. 盘点一下Redis中常用的Java客户端,或者咱们手写一个?

    Java中那些Redis的客户端 前面我们的所有操作都是基于redis-cli来完成的,那么我们要在Java中操作Redis,怎么做呢?首先我们先来了解一下Redis Serialization Pr ...

  9. js回顾(DOM中标签的CRUD,表格等)

    01-DOM中的创建和添加标签 02-删除替换克隆标签 03-全选全不选反选 04-新闻字体 05-表格增删 06-动态生成表格 07-表格隔行变色 08-左到右右到左(将左边的标签移动到右边) 09 ...

随机推荐

  1. POI读取excel文件。

    1) poi读取现成.xls文件,不需要自己建立.xls ====ReadExcel​类​==== package cust.com.excelToDataTest; import java.io.F ...

  2. java的Integer与int的比较

  3. SpringBoot(二)_项目属性配置

    修改端口 在main/resources/application.properties修改端口 server.port=8088 此时启动访问localhost:8088/hello 就会看到 Hel ...

  4. PHP全栈学习笔记12

    php简介,php历史,php后端工程师职业前景,php技术方向,php后端工程师职业体系介绍. php是世界上使用最广泛的web开发语言,是超文本预处理器,是一种通用的开源脚本语言,语法吸收了c语言 ...

  5. Python2与Python3字符编码的区别

    目录 字符编码应用之Python(掌握) 执行Python程序的三个阶段 Python2与Python3字符串类型的区别(了解) Python2 str类型 Unicode类型 Python3 字符编 ...

  6. RabbitMq在CentOs7下的完整安装步骤,带你踩坑

    1.前言 因为公司项目中用的RabbitMq来做消息处理,自己以前没有接触过,所以想自学一下.然额,光安装就花了6.7个小时才搞定,中间还换过一个版本,综合国内外博客才最终将所有安装中遇到的问题解决掉 ...

  7. vue项目使用websocket技术

    一.为什么需要websocket? 前端和后端的交互模式最常见的就是前端发数据请求,从后端拿到数据后展示到页面中.如果前端不做操作,后端不能主动向前端推送数据,这也是http协议的缺陷. 因此,一种新 ...

  8. 用Docker解决坑爹的环境搭建系列——mysql:5.6

    sudo docker pull mysql:5.6 mkdir -p /data/docker/mysql/data /data/docker/mysql/logs /data/docker/mys ...

  9. git程序多版本维护方案

    目前所在公司开发的系统为一个基础版本(通用版)包含了行业内一些基础功能实现,后期根据不同厂家进行定制版的开发,考虑独立项目的话代码维护不太方便,并且如果通用版本有变动的话,其他定制版本也都需要进行变动 ...

  10. 搜狗输入法与VS快捷键有冲突_处理办法

    前言:搜狗输入法是大家常用的文字输入工具,但是在开启输入法的时候,VS的一些快捷键无法正常使用,如智能提示快捷键:Ctrl+.,这就非常尴尬了,除非把输入法切换成英文或者卸载搜狗改别的输入法,一个是切 ...