00:00
首先呢，V-for啊，我在课件中呢，给大家列了两个例子，是两个最基本的，第一个就是这种写法用的不多，咱后面重点写都是第二个，第一个咱先简单感受一下什么意思啊，咱先看一下写法，就是你写个V杠后，然后在里边的这句话什么意思呢？它就表示啊，注意这个结构。这音是固定的，写到中间。然后这个十就表示现在它要循环十次，而每次循完之后，它的值都分制给这个N，所以这里边能把就这十循环的值给它依次输出，每个输出在这个标签中啊，这是一种写法，然后在写法中咱N后面可以加个叫index index什么意思呢？表示每次学那个索引值，因为你的N是从一开始index从零开始，这index表示它那个索引值，或者说一个下标值啊，这是它一个写法，那咱们。
01:01
演示一下啊，这个V-for这么一个用法，咱先做一个基本操作，然后再做一个实际中有数据的这个部分。咱们都实现一下啊。那我们来执行，现在我再建个文件，第八个就是voe的指令。啊，咱们叫这个。V杠。这么一个指令。然后创建之后，在里边我们写上这么一个基本代码啊，写上之后呢，因为咱们要做这操作啊，但是现在应该不需要这个部分啊，咱就直接这么来写了，在里边我先来一个u Li Li标签。这标签不知道各位是否记得啊，在HTM中这应该是一个叫列表标签啊，各位如果你忘记给他记住啊，属于最基础东西，后面咱都要用到，比如之前学的前后中的很多东西后面都要用到，然后在里边，比如现在我想做个循环便利，那怎么做？加个指令叫做V-for。
02:00
在V-four中，比如说现在我想做个操作，我想把十从一到十做一个便利，把一到十都做输出，那怎么做呢？注意它的写法啊，因为咱要遍历十次，那我来个十，在前面加个音。然后前面给你每次变历的那个变量起个名字，比如叫N啊，你注意啊，这个名字随便起，它就是每次变历值都给N，然后最后咱们把这N做个输出，用一个差值表达式写个N，这样的话就会把十做一个变利，然后每次遍历值在里边会做输出啊，这就是一个V-for的一个基本使用与它的结构。他希望就是这是你变历的次数，这是每次变历的值，中间加个音啊，就是在这个十的次数中进行遍历，然后N能取到每次变历之后那个值。啊，这个各位给他知道啊，然后咱们看一下效果啊，打看里边你看啊。
03:00
是不是就是一到十啊，把这个十个数都输出了，因为咱们用的是LY列表标签啊，这个完成了啊。然后完成之后，比如咱们下面再看个效果啊，为了明显我换个标签啊，就是O，就是一个有序一个无序嘛，然后OL里边也是加上一个LY，但是这里边怎么做呢？来这么来写啊，我来一个叫V杠负。在里边呢还是便利，比如十次再来一个in，但是在前面呢，我们要多加个东西啊，咱加个N，再来个逗号，比如我叫in代口。那这什么意思呢？N是你每次遍历之后那个值，咱看到就是一到十，还有一个叫inex是你每次变认那个索引值，比如它是啊什么01234这个值，那最后把两个值咱们也是做个输出啊，这是N。啊，N。然后后面有个索引啊，为了区分加个横杠啊，这是索引值，我们叫这个in desk啊，这是另外一个输出啊，就是加了一个索引值in desk，那咱们看效果啊。
04:11
大家看是这个结果，你看啊，我们N的值从一到十，索引值是不是从零到九与索引或者下标从零开始啊，这个就是一个最基本的用法啊，所以通过它各位知道它怎么去写啊，就是这个便利次数音是固定的，前面是因每次便利那个值啊，包括加入索引，这值从一开始，索引从零开始。啊，咱们把这个啊，我们就做到了啊，这各位可能知道啊。然后这个做到之后，咱下面做一个就是有数据的这种效果，给数据呢，做一个便利的效果，那怎么做，看我这课件中啊，比如现在咱一会儿我就构建类似于这么一个数据，而这些数据什么形式，咱仔细看啊，咱在应该是昨天或者之前回顾过了我们的Jason。
05:01
问各位啊，是不是有两种数据格式，一个叫对象，一个是叫数组，而这种格式是不是一个数组格式在里边就是有多个对象？包括这是一个数组，那我一会儿做件事情，我想把这数组做个便利，然后得到里边的每部分对象值，把这值在页面中做个显示，比如做成一个什么表格的形式啊，这是我们想做的这个效果，那咱们下面啊，就把这效果咱来最终试一下啊，看它怎么来做啊。就做一个实际的便利。这数据我就复制了啊，因为是一个普通的一个数组，那就是写一些数据就可以了。然后这个写完之后，下面我们给它做个遍历。啊，那便利呢，为了明显啊，这里边我加一个符号。这个符号。这个不知道各位是否知道啊，咱看一下啊，这个符号就这符号就是一条横线啊。就一条这叫水平线，然后在这线下边，比如咱们便利嘛，我就来这么一个叫。
06:06
Table有一个表格，然后表格里边table肯定有TR，还有这个TD。啊，这么一个结构在T里边，咱们做这个就是便利，便利跟上面一样，加一个叫V-for。然后怎么写，咱参考上面啊，你注意啊，第一个。因为这是咱遍利十，但是现在我便利的内容是不是要便利这个user list要便利它，所以怎么做呢？第一个user list运你要便利这个东西，在它前面写个什么，写个叫音。然后在最前面写上你每次便利之后那个对象的那个名字，比如说我们叫U啊，这是一个便利，而写法中各位注意啊，这U色名字可以随便起，但是user list跟它必须一样，音是固定的，它就表示遍利user list这个数组，然后得到每个对象就这个user。
07:00
啊，这一个写法，最后咱从user中把值取到，用差值表示，比如写一个user.id user.user nameme user.a依次取到。啊，这个我复制给他快速改一下啊，第二个叫username。第三个叫age。这样的话，我们可以完成这么一个变利啊，就是把这个user list数组给它变利，然后把里边的每个对象值取出来，在页面中做个显示啊，或者说你加个索引啊，但是现在这么做应该都能显示出来。这个啊，我们就做到了啊，就大家知道这个写法啊，咱后面这种写法写的很多啊，就经常都是这么来写啊，就加个索引啊，都一样的啊，然后这个写完之后，最后咱看一下效果。大家看啊，就最后一部分，你看123，然后这里面几个值年龄名字ID都取到了啊。这个我们就可以了啊，主要这个情况啊，当然表格嘛，咱们为了就是好看点，给它加上这么一个。
08:04
啊，包等于一啊，就是它那个表格那个线啊。咱看一下啊，就就做一个项目这个效果啊，现在这个已经做了一个便利，咱就给他最终输出出来了啊。这是关于叫V-four的一个指令。所以咱们啊，到这里这指令就完成了。啊，这个啊，是咱们关于voe中的这些基本东西。那最后我把这些啊给大家最终来重复一遍啊，教各位掌握，我这里演示这些都是重点，首先第一个咱看一下啊，叫V-B这个什么意思呢？它就表示啊，咱在属性里边可以取到你data中这个值，那写法就是V-band冒号加这个名称，但是这里边V-band可以省略叠加冒号。也可以啊，这叫做V-band，或者说叫单向绑定，一般用在我们的水里边，然后第二个叫双向绑定V-model，咱也演示过了，当你这里边变化，其他地方是会跟着变，这叫双向绑定V-model啊。第二个第三个叫事件，我们就是在这个就vouee里边加个methods定义义的方法，然后绑定事件，加一个叫V-on事件名称，这是方法名称，另外简写方式加个at符号，事件名称方法名称方法中括号可以省略啊，这是第三个，第四个修饰符，了解一下啊，这用的不多，就加一个叫普event，它就是让你事件原本行为不执行，只有我们自己这个方法。
09:40
啊，加上它比如我们这个萨，它本身就执行这个方法了，这是第四个。第五个很重要条件渲染，这个叫V-if，用它可以做判断，比如说咱们刚才例子中这个是否选中V-if，选中不选中输出不同内容啊，这是第五个，最后一个叫V-for，可以做一个循环便利，比如说我们直接循环这个十次，或者说你把这个数组遍历，再用V-for遍历出来，这是你遍历的数组，因是固定的，前面是每次遍历出来那个内容啊，然后最终叉尔比R式可以给他取到。
10:18
跟我们的这个JTL加也要表示有点类似啊，只是它是在voe中用指令写出来的，这是我们讲的voe中的相关的指令啊，所以各位啊，也是把这些都给他好好去写写，因为咱在后面的这种前端项目开发中，这些东西应该咱后面都要用到。所以都会用到，所以各位这些必须要熟练，特别是里边这么几个，一个是V-model双向绑定。这个后面会一直用，第二个是事件。然后还有就是里边这个V-if v-for啊，这用的是最多的。啊，这个啊，我们就演示出来了啊。
我来说两句