00:00
各位同学大家好,咱们继续学习voe中的指令,刚才我们演示了voe中的单向绑定、双向绑定,还有绑定事件,那下面我们来看最后两个指令,一个是条件判断,一个是循环便利。首先我们先看条件判断V-if指令。那这个指令我们通过一个具体例子给各位演示一下。首先我在里边创建一个HTM文件,咱们这个创建。文件我起个名字,第六个咱们叫做V-if HTML。把代码按照咱们代码片段生出来,然后生成之后在里边我们写具体内容,比如现在我用这么一个例子给大家演示一下啊,什么例子呢,我来说明,比如说咱们一会儿啊,我在页面中创建一个叫复选框。这个我应该知道啊,就是type等于check box复选框,然后咱们实现当我选中复选框,它做过提示,当我没有选中做另外一个提示,比如说选中我提示说复选框选中了,如果没有选中提示说他没有选中,就是判断复选框是否进行选中,如果选中的话做个提示,没有选中做另外一个提示,那下面呢,我们就来写一下这个具体例子,咱们看它是怎么样一个效果。
01:33
我们来做一个实验。现在在里边怎么做?首先我先建一个复选框input。Type,注意啊,等于叫什么check box复选框,这是我们做的一个创建,然后创建之后呢,它里边有一个Y这么一个属性,就是判断是否选中,那我们加上一个叫V-model双向绑定,给它起个名字,OK,一会儿咱们写的变量。
02:04
这咱之前说过啊,V-model它默认是针对那个Y6属性进行操作,Y6属性名字可以省略,这是我们写的第一部分,然后在在date中创建这么一个变量,OK,默认值我写个false。这是咱做创建,当我选中这值是就变成true,当我没有选中这变成false,然后选完之后,下面呢,咱们做个判断,用微杠if判断,为了明确我加个标签,比如说我加上这么一个。H1标签啊,当然可以加别的标签,然后在里边加上一个叫V-if咱们写一下,如果OK只是处,那咱做个提示,说复选框选中了,如果它不是处,那就没有选中,咱们再做一个提示,这个提示我们可以加另外一个指令叫V-else就是咱们说那个if效果。
03:03
当处选中了,当他不是处,就执行else,就是咱们最后提示说没有选中。所以以上就是一个基本例子,通过V-E进行一个条件判断,这也是VE中一个重要的指令,那咱们看一下最后结果怎么样,咱试一下啊,大家看啊,目前没有选中是不是这个提示,你看我现在选中了没有选中它是不是有不同的提示。所以现在咱们把这个条件判断指令就也是完成了V-if各位把这要顺先掌握这咱就说到这里。然后这个之后呢,我们再看一下最后一个指令,这个指令呢,咱们叫V-for也就进行循环便利。比如说我现在调用接口返回一个Json的数组,然后咱把数组时要遍历,遍历之后在页面中做个显示,而这个过程用V-four就能进行实现,所以咱最后来演示这个指令。
04:07
我在里边写一下。第七个文件V-DHTL,把代码我们出来,然后成之后咱们写一下啊,首先第一个我在date中呢,定义这么一个Jason数组,为了一会儿,那咱们起个名字,比如说我叫这个user list。加上一个数组,数组中加上它的值,这个值为了方便,我从课件中直接复制了,咱就加上这么几个值,有ID和名称。就是在数组中三个对象,ID和名称。所以咱们现在把这个数据我们做了一个创建。格式调整一下,然后创建之后,下面呢,我想做件事情,把Jason数组进行遍历,然后最终在页面中做个显示,那咱们最后来写一下啊,我在这位置便利。
05:05
遍历的话呢,为了方便,我加上一个table这么一个表格,然后table我都知道表格在里边有行和列,它的行叫TR列,或者单元格叫TD。所以它里边就是每行内容就是一行T,在T里边我们加上指令,各位记住啊,V-four。V-for怎么来用?各位记住它的特点,首先第一个它中间有一个固定的关键字叫in,这是固定的,在in的右边是你要遍历那种,咱们遍历的是谁,是不是右侧list遍历,左边是每次遍历之后的那种,因为咱们每次遍历大家看到。每行每行记录是不是一个对象,所以咱们起个名字,比如说我叫u sir,这个名字随便起,现在完成便利,然后起完名字之后在里边啊,还有一个纸我也写上啊,这个叫in desk。
06:05
这是什么意思呢?代表它的索引,你列为索引从零开始,所以现在这里边完成一个编写,完成之后,在TD中咱们显示它的值,那用差值表达式,第一个把索引值我们最后显示。然后下面用叉表示user,点上里边的属性名称ID,把ID显示出来,还有一个username。用同样方式咱们进行显示。所以大家看啊,现在这么做就可以把user list数组通过V-for做一个遍历,最终得到我们的结果,然后在里边user是每次变列之后的内容,就是每行的数据,这个对象index,它的索引,咱们把这个值最终在里边显示出来了,这是咱们的基本的使用,然后咱们通过页面访问一下。
07:00
大家看啊,你先看第一列012是四值,然后一。这个Helen啊,2PETER3ANDY这些都进行显示,所以现在V-four指令我们也完成了。所以总之大家记住啊,咱们现在给各位演示了五个VE中的指令,但是VE中呢,其实不是只有五个,这五个是很常用的五个,咱们项目中这五个会用到,包括最后重复一遍,第一个V-band单向绑定,第二个V-model双向绑定,第三个V-二绑定事件,第四个V-if条件判断,还有最后一个V-for循环,便利各位把五个指令要熟练掌握它的使用,咱们后面项目中在前端开发中马上会用到这些指令。
我来说两句