【Vue.js】代码优化:在dom中加一行v-if就可少写一个循环类方法
【问题描述】
把当前用户的购物车中(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就可少写一个循环类方法的更多相关文章
- Vue.js 在 webpack 脚手架中使用 cssnext
Vue.js 的 webpack脚手架默认已经使用了 PostCSS 的 autoprefixer 的功能. 如果想使用下一代 css语法,即cssnext: 1. 安装依赖 npm install ...
- C++STL 中的容器整体/逐元素操作方法 少写80%for循环
本文中示例代码默认已引用 std 命名空间 累加 (std::accumulate) accumulate(begin, end, init, op) 返回给定区间内元素的累加值与给定初值的和,初值不 ...
- Vue.js 子组件的异步加载及其生命周期控制
前端开发社区的繁荣,造就了很多优秀的基于 MVVM 设计模式的框架,而组件化开发思想也越来越深入人心.这其中不得不提到 Vue.js 这个专注于 VM 层的框架. 本文主要对 Vue.js 组件化开发 ...
- js基础之DOM中元素对象的属性方法
在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个 文档节点 . 所有的HTML元素都是 ...
- Vue.js笔记 — vue-router路由懒加载
用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,这样就会更加高效,实现代码如下 ...
- vue.js在html页面中的使用
1.加载vue.js,然后 var app = new Vue({ //vue代码})2.截图如下:
- js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象
事件对象 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...
- 盘点一下Redis中常用的Java客户端,或者咱们手写一个?
Java中那些Redis的客户端 前面我们的所有操作都是基于redis-cli来完成的,那么我们要在Java中操作Redis,怎么做呢?首先我们先来了解一下Redis Serialization Pr ...
- js回顾(DOM中标签的CRUD,表格等)
01-DOM中的创建和添加标签 02-删除替换克隆标签 03-全选全不选反选 04-新闻字体 05-表格增删 06-动态生成表格 07-表格隔行变色 08-左到右右到左(将左边的标签移动到右边) 09 ...
随机推荐
- POI读取excel文件。
1) poi读取现成.xls文件,不需要自己建立.xls ====ReadExcel类==== package cust.com.excelToDataTest; import java.io.F ...
- java的Integer与int的比较
- SpringBoot(二)_项目属性配置
修改端口 在main/resources/application.properties修改端口 server.port=8088 此时启动访问localhost:8088/hello 就会看到 Hel ...
- PHP全栈学习笔记12
php简介,php历史,php后端工程师职业前景,php技术方向,php后端工程师职业体系介绍. php是世界上使用最广泛的web开发语言,是超文本预处理器,是一种通用的开源脚本语言,语法吸收了c语言 ...
- Python2与Python3字符编码的区别
目录 字符编码应用之Python(掌握) 执行Python程序的三个阶段 Python2与Python3字符串类型的区别(了解) Python2 str类型 Unicode类型 Python3 字符编 ...
- RabbitMq在CentOs7下的完整安装步骤,带你踩坑
1.前言 因为公司项目中用的RabbitMq来做消息处理,自己以前没有接触过,所以想自学一下.然额,光安装就花了6.7个小时才搞定,中间还换过一个版本,综合国内外博客才最终将所有安装中遇到的问题解决掉 ...
- vue项目使用websocket技术
一.为什么需要websocket? 前端和后端的交互模式最常见的就是前端发数据请求,从后端拿到数据后展示到页面中.如果前端不做操作,后端不能主动向前端推送数据,这也是http协议的缺陷. 因此,一种新 ...
- 用Docker解决坑爹的环境搭建系列——mysql:5.6
sudo docker pull mysql:5.6 mkdir -p /data/docker/mysql/data /data/docker/mysql/logs /data/docker/mys ...
- git程序多版本维护方案
目前所在公司开发的系统为一个基础版本(通用版)包含了行业内一些基础功能实现,后期根据不同厂家进行定制版的开发,考虑独立项目的话代码维护不太方便,并且如果通用版本有变动的话,其他定制版本也都需要进行变动 ...
- 搜狗输入法与VS快捷键有冲突_处理办法
前言:搜狗输入法是大家常用的文字输入工具,但是在开启输入法的时候,VS的一些快捷键无法正常使用,如智能提示快捷键:Ctrl+.,这就非常尴尬了,除非把输入法切换成英文或者卸载搜狗改别的输入法,一个是切 ...