通过数组的索引获取数组的数据
这种写法在数据很多的时候或者数据发生更新的时候处理就会很繁琐,
因此我们可以使用v-for指令来循环数组
基本数组的循环
v-for 还支持一个可选的第二个参数为当前项的索引。
数组项为对象的循环
使用索引
同时我们也可以用 of 替代 in 作为分割符
语法
示例:
也可以用 v-for 指令来循环对象。
第一个参数是训练遍历对象的属性值:
第二个的参数为对象的属性(键名)：
还可以通过第三个参数来获取索引值：
使用 v-for 更新已渲染的元素列表时,默认用 就地复用 策略列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素我们在使用的使用经常会使用 index (即数组的下标)来作为 key ,但其实这是不推荐的一种使用方法
key值的使用其实是和vue响应式已经虚拟DOM有关, 那么我们通过下面的例子来了解一下
例子:
数据
页面渲染
但是数据发生了变化,
如果数据是这一种变化的话, 那么index没什么问题
数据前后变化的结果
这样vue就会分析到 其他的数据 都不需要改变,只需要在新增一个DOM节点,然后添加新增的数据就可以了
可以输入我们是在数组中间插入的数据就会不一样为了
这时数据的对比
通过上面清晰的对比,发现除了第一个数据可以复用之前的之外,另外三条数据都需要重新渲染
是不是很惊奇,我明明只是插入了一条数据,怎么三条数据都要重新渲染?而我想要的只是新增的那一条数据新渲染出来就行了
最好的办法是使用数组中不会变化的那一项作为 key 值,对应到项目中,即每条数据都有一个唯一的 id ,来标识这条数据的唯一性使用 id 作为 key 值,我们再来对比一下向中间插入一条数据,此时会怎么去渲染
此时数据的变化
现在对比发现只有一条数据变化了,就是 id 为4的那条数据,因此只要新渲染这一条数据就可以了,其他都是就复用之前的
为什么需要key属性: 虚拟DOM的diff算法,
当某一层有很多相同的节点时，也就是列表节点时，Diff算法的更新过程
我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的：
即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？
所以我们需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。
所以一句话，key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。
建议尽可能在使用 v-for 时提供 key ，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
v-if和v-for一起使用，v-for的优先级要高于v-if
可能会想到v-if和v-for是用的两种情况
那么接下来好好看看这两种情况
第一种情况: 为了过滤一个列表中的项目
为了过滤项目内容,我们可能会如下调用:
在这种情况下，请将 users 替换为一个计算属性（比如 activeUsers ），让其返回过滤后的列表。
示例详解:
如果现在只想显示价格在22元以上的水果,我们可能会这么写
这么写固然会得到你想要的效果, 但是因为v-for和v-if优先级的关系, 所以将会经过如下的运算
因此，哪怕我们只渲染出一小部分内容，也得在每次重新渲染的时候遍历整个列表，无论价格是否满足我们的条件
随意我们推荐使用计算属性, 在计算属性中处理过滤事宜, 计算属性会在计算完毕后缓存内容,提高遍历的效率
这样我们得到的结果是一样的,但是我们获得了如下的好处
第二种情况: 为了避免渲染本应该被隐藏的列表
也就是根据条件类判断列表的显示我们也后可能会使用下面的方法调用
实例详解:
原理是一样的, 就是如果这么写, 还是会循环遍历每一个数据,然后判断是不是显示. 一样浪费
所以我们将 v-if移动到容器元素，这样我们就不用对每一个元素都进行判断是否显示, 取而代之的是，我们只检查判断一次，且不会在 isShow 为假的时候还循环运算 v-for。
有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以使用计算属性和方法来过滤数据
我们上面讲过了计算属性,下面来看看方法的使用
总结示例:
首先for循环语句是程序中性能最高的循环之一，我一般都用它。for 有两种形式：一种是数字形式，另一种是通用形式。
数字形式的 for 循环，通过一个数学运算不断地运行内部的代码块。 下面是它的语法：
block 将把 name 作循环变量。 从第一个 exp 开始起，直到第二个 exp 的值为止， 其步长为第三个 exp 。 更确切的说，一个 for 循环看起来是这个样子
注意下面这几点：
所有三个控制表达式都只被运算一次， 表达式的计算在循环开始之前。 这些表达式的结果必须是数字。
var，limit，以及 step 都是一些不可见的变量。 这里给它们起的名字都仅仅用于解释方便。
如果第三个表达式（步长）没有给出，会把步长设为 1 。
你可以用 break 和 goto 来退出 for 循环。
循环变量 v 是一个循环内部的局部变量； 如果你需要在循环结束后使用这个值， 在退出循环前把它赋给另一个变量。
通用形式的 for 通过一个叫作 迭代器 的函数工作。 每次迭代，迭代器函数都会被调用以产生一个新的值， 当这个值为 nil 时，循环停止。 通用形式的 for 循环的语法如下：
注意以下几点：
explist 只会被计算一次。 它返回三个值， 一个 迭代器 函数， 一个 状态， 一个 迭代器的初始值。
f， s，与 var 都是不可见的变量。 这里给它们起的名字都只是为了解说方便。
你可以使用 break 来跳出 for 循环。
环变量 var_i 对于循环来说是一个局部变量； 你不可以在 for 循环结束后继续使用。 如果你需要保留这些值，那么就在循环跳出或结束前赋值到别的变量里去。
到第二个 exp 的值为止， 其步长为第三个 exp 。 更确切的说，一个 for 循环看起来是这个样子
注意下面这几点：
所有三个控制表达式都只被运算一次， 表达式的计算在循环开始之前。 这些表达式的结果必须是数字。
var，limit，以及 step 都是一些不可见的变量。 这里给它们起的名字都仅仅用于解释方便。
如果第三个表达式（步长）没有给出，会把步长设为 1 。
语言循环编辑
在C语言中，有三种类型的循环语句：for语句、while语句和do While语句。分别介绍如下：
for
for为当型循环语句，它很好地体现了正确表达循环结构应注意的三个问题：
⑴控制变量的初始化。
⑵循环的条件。
⑶循环控制变量的更新。
for表达式
表达式1：一般为赋值表达式，给控制变量赋初值；
表达式2：关系表达式或逻辑表达式，循环控制条件；
表达式3：一般为赋值表达式，给控制变量增量或减量。
语句：循环体，当有多条语句时，必须使用复合语句。
for语句格式为：
for(表达式1；表达式2；表达式3）语句：/*循环体*/
for语句执行过程如下：
循环语句
①先对表达式1赋初值；
②判别表达式2是否满足给定条件，若其值为真，满足循环条件，则执行循环体内语句，然后执行表达式3，进入第二次循环，再判别表达式2……；否则判断表达式2的值为假，不满足条件，就终止for循环，执行循环体外语句。for语句语法流程如下图所示：
例题：
循环语句
# include
main ()
{
int n,nu
nu=0
for (n=1n<=200n++)
nu+=n//a+=b就是a=a+b
printf ("nu=%d\n",nu)
}
编译并执行后，屏幕显示：
nu=20100
在程序中，for语句小括号内的三个表达式分别为：n=1n<=200n++。表达式1,n=1是给n赋初值，表达式2是关系表达式,n小于等于200时，表达式都为真，则执行循环体内的语句nu+=n；（即nu=nu+n；），然后执行表达式3(n++），进入下一轮循环；若n大于200时，表达式2为假，则终止循环，执行printf()语句，在屏幕上打印出：nu=20100。
几种特殊for语句的用法：
⑴for小括号内三个表达式为空
例 for()
printf ("test")
在小括号内只有两个分号，无表达式。表示无限循环。这种无限循环适用于菜单选择程序中。
⑵没有循环体的for语句
例：for(*str==''str++)；
这种情况循环体内的语句只是一个分号，这个for循环是指针str所指流中的前导空格删除。
例：for (t=0t )
此例在程序中起延时作用。
while
►while结构循环为当型循环(when type loop)，一般用于不知道循环次数的情况。维持循环的是一个条件表达式，条件成立执行循环体，条件不成立退出循环。
while语句格式为：
►while(条件表达式)
►{
► 循环体；
►}
►每次执行循环体前都要对条件表达式进行判断。
这里的表达式是循环能否继续下去的条件，而语句是循环体。只要表达式为真，则执行循环体内语句。否则终止循环，执行循环体外语句。
例题：f7_2.c
# include h
main ()
{
int u,v,temp
printf("请输入两个非负整数：\m")
scanf("% d % d ",&u,&v)
While(v!=0)
{
temp=u% v/*循环体内语句*/
u=v/*循环体内语句*/
v=temp/*循环体内语句*/
}
printf("最大公约数是：%d\n",n)
}
编译并执行结果，屏幕显示：
请输入两个非负整数：
若从键盘输入：150 35并回车，屏幕显示：
最大公约数是：5
程序中，while循环体内有三条语句，应用大括号括起来，表示一个语句块。当表达式v!=0为真时，程序循环执行循环体内三条语句，直到v!=0为假时，终止循环，执行printf()语句，在屏幕上显示最大公约数。
do while
►do…while语句结构为直到型循环(until type loop)，也用于不知道循环次数的情况。do…while和while的区别在于do…while结构是执行完一遍循环体再判断条件。
do while语句格式为：
►do
►{
► 循环体；
►}while(条件表达式)
►每执行完一次循环体，do…while结构都要判断一下条件表达式。
程序进入do while循环后，先执行循环体内语句，然后判断表达式的真假，若为真则进行
下一次循环，否则为假则终止循环。该循环语句的特点是，表达式为假时也执行一次循环体内语句。
do while语句语法流程如下图所示：
总的说来，for和while循环是在顶上测试循环终止条件，而do while循环是在之后，在底部进行测试所以循环体至少要执行一次。
利用do while循环的特点，可写出菜单程序。
例题：
#include<stdio.h>
main ()
{
char ch
printf("1.输入记录\n")
printf("2.删除记录\n")
printf("3.显示记录\n")
printf("请选择：\n")
do
{
ch=getchar ()
switch (ch)
{
case '1' :printf ("输入记录 \n")
break
case '2' :printf ("删除记录 \n")
break
case '3' :printf ("显示记录 \n")
break
default:printf("选择错！\n")
}
}while(ch!='1'&&ch!='2'&&ch!='3')
}
while与do while的区别
►假设条件表达式一开始就是不成立的。
►while结构的循环体一遍也不会运行。
►do…while结构的循环体运行了一遍。
本程序执行的过程是，通过do while循环体内的第一条语句ch=getchar ()接收用户的选择，第二条语句switch判断用户输入是否是‘1’，‘2’，‘3’，若不是则显示"选择错！"。程序利用do while语句的特点，首先执行循环体内语句一次，然后用表达式ch!=‘1’&&ch!=‘2’&&ch!=‘3’来循环判断用户的键盘输入，只要不是‘1’、‘2’、‘3’，程序总是在这里循环。
这个程序实例只是为了说明do while语句用法，实际应用中的菜单程序，要在每条case语句冒号后面写出要调用的相应函数。
总结以上三种循环语句，for语句的功能最强,它有多种特殊形式。该语句小括号内的表达式，可任意变动，可以省略，也可以增加。例如，在小括号内的分号间增加几个表达式如for(m=0,h=1n<100n++），或for (h=0,j-50h<=jh++,j--）等等。可以将循环体的一些语句放在表达式3的位置，中间用逗号分隔。如：for (i=1,j=strlen (me)i 三种循环语句，均可嵌套使用，也就是在一个循环内又包含另一个循环结构。也可互相嵌套使用，可有多曾嵌套结构。
软道语录
循环语句
循环语句就是根据循环条件反复执行相同的语句，直到循环条件不成立。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）