Vue的学习之旅-part6-循环的集中写法与ES6增强语法

Vue的学习之旅-循环的集中写法与ES6增强语法

  • vue中的几种循环写法
  • for循环
    • for in 循环 for(let i in data){}
    • for of 循环 for(let item of data){}
    • reduce() 遍历 reduce( function( preValue, item){} , 0 )
  • ES6增强写法 类似语法糖简写
    • 对象简写
    • 函数简写
  • 动态组件中使用 <keep-alive>缓存组件,防止反复重新渲染组件


前几篇博客: Vue的学习之旅-part1
前几篇博客: Vue的学习之旅-part2
前几篇博客: Vue的学习之旅-part3
前几篇博客: Vue的学习之旅-part4
前几篇博客: Vue的学习之旅-part5

博主 DTcode7 带您 溺亖在知识的海洋里,嘿嘿嘿.~
🐒 个人主页—— DTcode7 的博客 🐒
《微信小程序相关博客》
《Vue相关博客》
《前端开发习惯与小技巧相关博客》
《AIGC相关博客》
《photoshop相关博客》
😚 吾辈才疏学浅,摹写之作,恐有瑕疵。望诸君海涵赐教。望轻喷,嘤嘤嘤 🙈
🕍 愿斯文对汝有所裨益,纵其简陋未及渊博,亦足以略尽绵薄之力。倘若尚存阙漏,敬请不吝斧正,俾便精进!


vue中的几种循环写法

for循环

在这里插入图片描述

for in 循环 for(let i in data){}

在这里插入图片描述

for of 循环 for(let item of data){}

在这里插入图片描述

循环对象属性的时候,使用for…in,
在遍历数组的时候的时候使用for…of

reduce() 遍历 reduce( function( preValue, item){} , 0 )

reduce方法的第一个参数就是个function
在这里插入图片描述

ES6增强写法 类似语法糖简写

对象简写

在这里插入图片描述

函数简写

在这里插入图片描述
在这里插入图片描述

动态组件中使用 缓存组件,防止反复重新渲染组件

在这里插入图片描述
切换tab栏目,再次切换回来,组件就重新渲染了在这里插入图片描述
如何解决这个问题?
需要使用到:
在这里插入图片描述
此时,切换到其他tab,再切换回来,不会重新渲染组件,之前选择的内容也还会在。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/304176.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

dnspy逆向和de4dot脱壳

拿到一个软件&#xff0c;使用dnspy查看&#xff0c;发现反汇编后关键部分的函数名和代码有很多乱码&#xff1a; 这样的函数非常多&#xff0c;要想进一步调试和逆向&#xff0c;就只能在dnspy中看反汇编代码了&#xff0c;而无法看到c#代码&#xff0c;当时的整个逆向过程只剩…

windows安装Redis,Mongo,ES并快速基本掌握开发流程

前言 这里只是一些安装后的基础操作&#xff0c;后期会学习更加深入的操作 基础操作 前言RedisRedis启动idea集成Redisjedis技术 Mongodbwindows版Mongodb的安装idea整合Mongodb ES(Elasticsearch)ESwindows下载ES文档操作idea整合ES低级别ES整合高级别ES整合 Redis Redis是…

Java项目:基于Springboot+vue实现的中国陕西民俗前后台管理系统设计与实现(源码+数据库+毕业论文)

一、项目简介 本项目是一套基于Springbootvue实现的中国陕西民俗管理系统设计与实现设 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、界…

git bash用法-批量修改文件名

在win系统上安装git bash可以使用命令行模式操作&#xff0c;比较方便 1.原始文件名 2.代码 for file in *3utr*; do mv "$file" "$(echo "$file" | sed s/3utr/5utr/)"; done3.修改后的文件名

【Web开发】jquery图片放大镜效果制作变焦镜头图片放大

jquery图片放大镜效果制作变焦镜头图片放大实现 整体步骤流程&#xff1a; 1. 前端html实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns"…

Android 四大组件启动

service: startService启动过程分析 - Gityuan博客 | 袁辉辉的技术博客 在整个startService过程&#xff0c;从进程角度看服务启动过程 Process A进程&#xff1a;是指调用startService命令所在的进程&#xff0c;也就是启动服务的发起端进程&#xff0c;比如点击桌面App图标…

LeetCode513:找树左下角的值

题目描述 给定一个二叉树的 根节点 root&#xff0c;请找出该二叉树的 最底层 最左边 节点的值。 假设二叉树中至少有一个节点。 代码 层序遍历 class Solution { public:int findBottomLeftValue(TreeNode* root) {if (root nullptr) return 0;queue<TreeNode*> que…

二、计算机网络体系结构参考模型

一、分层结构 &#xff08;一&#xff09;为什么要分层&#xff1a; 发送文件/数据前要完成的工作&#xff1a; 1&#xff09;发起通信的计算机必须讲数据通信通路进行激活 2&#xff09;要告诉网络如何识别目的主机 3&#xff09;发起通信的计算机要查明目的主机是否开机、并且…

13 指针(上)

指针是 C 语言最重要的概念之一&#xff0c;也是最难理解的概念之一。 指针是C语言的精髓&#xff0c;要想掌握C语言就需要深入地了解指针。 指针类型在考研中用得最多的地方&#xff0c;就是和结构体结合起来构造结点(如链表的结点、二叉树的结点等)。 本章专题脉络 1、指针…

PCB学习记录---原理图

一、注释 NC&#xff1a;no connect,默认不连接 NF: no fix&#xff0c;默认不安装 0R: 0R的电阻&#xff0c;即可以短路 二、看图流程 1、看标题&#xff0c;了解功能 2、浏览有几个模块 3、找芯片对应的数据手册&#xff0c;了解芯片功能和使用 例如CH224&#xff…

html页面跳转的方法

1、加在head里面 <head> <meta http-equiv"refresh" content"1;urlhttps://ha.huatu.com/zt/hnsylkseo/?"> </head> 2、加在body里面 在body里用js <script language"javascript" type"text/javascript">…

蓝桥杯每日一题(背包dp,线性dp)

//3382 整数拆分 将 1,2,4,8看成一个一个的物品&#xff0c;以完全背包的形式放入。 一维形式&#xff1a;f]0]1; #include<bits/stdc.h> using namespace std; //3382整数拆分 const int N1e610, M5e510; int mod1e9; int f[N],n; int main() {cin>>n;//转化为完…

Harmony鸿蒙南向驱动开发-RTC

RTC&#xff08;real-time clock&#xff09;为操作系统中的实时时钟设备&#xff0c;为操作系统提供精准的实时时间和定时报警功能。当设备下电后&#xff0c;通过外置电池供电&#xff0c;RTC继续记录操作系统时间&#xff1b;设备上电后&#xff0c;RTC提供实时时钟给操作系…

结构型模式--3.组合模式【草帽大船团】

1. 好大一棵树 路飞在德雷斯罗萨打败多弗朗明哥之后&#xff0c;一些被路飞解救的海贼团自愿加入路飞麾下&#xff0c;自此组成了草帽大船团&#xff0c;旗下有7为船长&#xff0c;分别是&#xff1a; 俊美海贼团75人 巴托俱乐部56人 八宝水军1000人 艾迪欧海贼团4人 咚塔塔海…

网络安全加密算法---对称加密

三位同学一组完成数据的对称加密传输。 三位同学分别扮演图中 A、B 和 KDC 三个角色&#xff0c;说明 KA、KB&#xff0c;KAB 和发送的数据Data 的内容。 给出图中 2 和 3 中的数据&#xff0c;以及 Data 加密后的密文。可以完成多轮角色互换的通信 过程。其中一轮过程要求 K…

【LeetCode】排序数组——不一样的方式实现快排

目录 题目链接 颜色分类 算法原理 代码实现 排序数组 算法原理 代码实现 最小的k个数 算法原理 代码实现 题目链接 LeetCode链接&#xff1a;75. 颜色分类 - 力扣&#xff08;LeetCode&#xff09; LeetCode链接&#xff1a;912. 排序数组 - 力扣&#xff08;L…

前端:自制年历

详细思路可以看我的另一篇文章《前端&#xff1a;自制月历》&#xff0c;基本思路一致&#xff0c;只是元素布局略有差异 ①获取起始位startnew Date(moment().format(yyyy-01-01)).getDay() ②获取总的格子数numMath.ceil(365/7)*7,这里用365或者366计算结果都是一样的371 …

[lesson17]对象的构造(上)

对象的构造(上) 对象的初始化 从程序设计的角度&#xff0c;对象只是变量&#xff0c;因此&#xff1a; 在栈上常见对象时&#xff0c;成员变量初始为随机值在堆上创建对象时&#xff0c;成员变量初始为随机值在静态存储区创建对象时&#xff0c;成员变量初始为0值 生活中的对…

FPN(Feature Pyramid Network)详解

文章涉及个人理解部分&#xff0c;可能有不准确的地方&#xff0c;敬请指正 0. 概述 FPN&#xff0c;全名Feature Pyramid Networks&#xff0c;中文称为特征金字塔网络。它是2017年cvpr上提出的一种网络&#xff0c;主要解决的是目标检测中的多尺度问题。FPN通过简单的网络连…

C++修炼之路之string模拟实现

目录 前言 一&#xff1a;构造函数析构函数拷贝构造函数 二&#xff1a;c_str size capacity operator operator[] 三&#xff1a;普通迭代器 const迭代器范围for 四&#xff1a;关系操作符重载 五&#xff1a;reserveresize 六&#xff1a;push_back …