36-尚硅谷-尚医通-前端知识点-Vue-循环指令

下面我们来看一下列表指令或者说循环指令，给各位直接来演示一下，然后列表指令它的写法我们就写一个叫V杠后，在里边可以做一个便利或者说循环操作，那我在这图上给大家写一下，然后咱们通过一个例子具体来演示一下列表指令。或者说循环指令。然后这个指令的写法，我们就写一个叫V杠。进行这个操作，那下面呢，我们就重新创建一个新的页面，然后咱们来实现这个最终的效果，在里边我把页面名字改一下，我们叫零六。循环指令。然后这个循环指令我们怎么来演示呢？给各位说一下，首先第一个呢，咱们在这个voe中先定义这么一个相关的值，而这个值呢，咱就写一个数组类型的这么一个值，比如说给它起个名字，咱们就叫user例子，然后在里边呢，我加上一个数组形式，在数组中我们加上这么两个对象，或者说你可以加多个，咱以两个为例，然后在对象中，比如咱加上它的。

名字，这是第一个是name。它的值我们叫Lucy。然后第二个它叫A这个值，比如说咱们来一个20。这是我们的第一个对象，然后我在里边再写上第二个对象，第二个对象的名字我们叫麦，它的值我们叫30，所以大家看现在呢，我的这个user例子就是一个J的数组形式，然后咱们可以通过V杠后把它变利做一个显示，那我下面给各位来写一下。首先这个我先去掉。

然后怎么做呢，在里边呢，我就直接写上一个div，然后在div中呢，咱就加上一个叫。V杠。在V-Bo中怎么写？给大家强调，首先第一个你加上要便利的集合或者数组的变量名称，咱们的名称是不是叫就是例子，然后加上之后在里边我加个音，在音前边给它起个名字，这是一个最基本的结构。而这个结构什么意思呢？我强调它就表示啊，咱们要便利user list，然后变利之后的每部分的名字叫user，比如现在我变成user色，丽色，第一部分是它，我们就起名叫user色，第二部分是它，我们起名叫user色，就是你每次变利之后，那个对象我们叫user色，然后便利之后，咱们在div里边，我来把它的值取到，我们加上一个差值，表示通过U色取到。

各位注意，每次便利之后的内容是不是一个对象啊，而咱最终取的是不是要取对象中的值啊？那大家说怎么取？做法应该并不复杂，因为我们的数据是KY6，那我怎么做，是不是就点上它的K，是不是可以得到？比如说现在我把第二个也取掉。我们写一个user.a所以咱们这么做的话，就可以把这个user list数组中的值做个变利，咱们通过user点上name，取它的name值，点上A，然后取到它的A值。这样的话，这个效果我们就做到了，然后咱们来把效果最终做个测试，看一下结果，大家看LUCY20 marry30是不是都讲出来了，这个我们就完成了。所以各位把这个写法给条掌握，然后在写的过程中呢，其实咱们在里边呢，也可以加上这么一个东西给各位写一下啊，就是现在我可以这么写，我写个user括号，然后逗号，比如写一个叫inex，就关于那个inex inex是什么呢？它就表示你每次便利之后那个索引值，比如我第一条记录是个索引，第二条记录是个索引值，而它的索引肯定各位都知道是不是从零开始，所以咱们通过因代能得到每次电离那个索引值。

那这个值我在里边也做一个显示。我们就直接输出这个一代口，这样的话咱们把它做了一个改进，就是得到每次变率之后那个索引值，大家看第一个值索引是不是零，第二个索引是不是就是一，这是关于我们说的列表指令或者说循环指令演示，用V杠后做一个显示。所以说到这里为止呢，咱就把这个voe中的常用的几个指令给各位应该都做了演示，然后这个指令最后给各位来快速重复一遍。

首先我们看啊，它里边的第一个指令我们叫V杠半值单向绑定，它可以在属性里边取到你那个data中的值，第二个V-model的双向绑定，它也发生变化，其他的跟它相同，名称都会跟着变，第三个叫V杠二，这是什么？刚才咱们演示到了是不是一个绑定事件，有你可以简写叫at，加上名称，然后下一个叫条件指令，用V-if v-else做判断，还有最后一个循环指令，V杠后能便利的集合或者便利速度，最终把值做个显示。所以这些就是关于voe中的常用指令，各位都要给他熟悉，咱们后面的项目中我们应该都会用到。