00:00
大家好,我是学习园地的特约讲师高若峰,上节课咱们学习了没有的模板语法,条件分支指令,那作为流程控制,那条件分支和循环这样的语句呢,都是分不开的,对吧?那我们上节课讲了这个分支结构啊,If啊,否则否则,如果多路分支也介绍了if和微杠数的这样的一个区别,那这节课呢,我们来学习一下循环,循环便利指令,那可以在我们呃VIVO的模板里边便利数组,也可以便利我们的对象。呃,两种结构都是可以的,那这个在view里边加入微方还是挺方便的,因为在right里边,Right这个框架里边,我们的便利的时候呢,是呃,没有这个指令的,那我们就得使用map去迭代,才能够达到我们想要的一个效果。来我们还是直接上代码,那我已经把上几个代码大家呃备份了一份啊归杠六就是上几给大家备份的一个代码,那我们来看一下,我们想遍历数组,我们先来变历数组,那遍历数组呢,那我们一定是什么,得先生明一个数组对不对,那我们这里边比如说我声明一个S一个数组,数组是这样的,那我们这里边比如说写上Java。
01:07
拍摄。PN,然后PP对吧,是后端的,再写几个前端的,就是will that。随便写几个,就这个数组,那数组我们想遍历呢,我们肯定是一般的,我们U列表都放在ul里边编辑就可以了,那ul呢,我把这个样式给它重启一下啊,不然的话,它默认有一些样式不太好看,那我们也比如说part让它是零的像素,PART0让它也是零个像素,然后我们呃样式呃,List列表的样式style让的是no,让他没有把原来的样式给它都清除掉啊。这就可以了。然后我们看一下使用Li去便利,那我们V-for放的就放在这块,V啊for这里边就是便利我们的呃情况跟我们在呃原里边学的那种是一样的,比如说变列数组啊,使用of啊in呢对吧,这里边它支持in的语法,中间前面呢是我们随便声命的变量,自己起的叫什么名都行,那因后边呢就是数组或者对象,那我们假如说这个是对象,呃是数组,那我们就list,直接就能变离这list,那list的长度里边有几个就会循环几次,那这里边有五个,它肯定会循环五次,循环五次呢,分别把每次的结果给ATM。
02:20
给他,然后呢,我们在这个里边用。插值的方式使用这个I,那这样的话,数组里边的值就会给IMIT就会在这显示,你保存一下。但这块会有一个错误出现,它会告诉我们什么,看一下,呃,什么错误呢?告诉我们元素对吧?没有绑定这个K,那我这先绑定一下啊,先把这错误去掉,嗯,在V2里边呢,是不用说强制绑定这个K啊啊后边我会详去介绍这个K,因为V杠啊,放着这个我们可以用语法长冒号这个吗绑定,那这K的值呢,通常是嗯,IM啊或者是ID啊,或者index的都可以分析index的,你看就把这里边的每一个值都给我们变列出来了,这就是循衡的语法,你看你写一条对吧,但这条呢,会根据数组长度写多条,当然我们也可以限制它循环次数或边使用S令对吧?从哪开始,从零开始变辑三条,保存一下是不是就变辑三条啊,对吧?这块你可以指定限制一个数据或者对象的一个个数,当然这个不是咱们主要的。
03:18
这就是这个语法。当然了,变成数组,那数组像这种数组呢,肯定我们还是有下标的,对吧,函数下标的,那我们需要呃下标怎么办呢?这是第一种语法,我们把它。嗯,复制一下。我们把这块注释一下。便利普通的数组,那数组如果加下标的话,我们这块给它加两个元素,逗号inex。代,但是如果这个变量也是我们随便写的,你看这么写的语法上有问题怎么办呢?那我们把这块加上括号。这样的话,我们就遍利这个数组的时候啊,什么把我们这里边的值记住,第一个是我们的数组里边的值,第二个是数组下标放到这来,那我们假如说想在前面使用这个下标,我们怎么办呢?我们在这块下标和值,那前面我们也是用差值的方式做了一个排括号index,那我们就可以把下标和值0.345全打印出来了,那如果我想这个下标它从一开始呢,那也好办,因为在差值里边可以有简单的运算嘛,加一不就完了吗?对吧,12345。
04:17
这就是数组电力电离数组的方式,可以直接变离值,也可以变利值和下标都是可以的来。我们,呃,复制一份。啊下啊。陈意粘,停一下,我们把这个故事掉,那我们再来看。这是便利数组的方式,那我们再来便利对象的方式,那我这里边再声明一个对象,比如说呃,Obj一个对象,当然尽量可起的名字,起的名字有可能有这个OB键,我就随便写了一个OB键变成对象,那对象呢,我们肯定是阶层的这样的格式对不对,那对象都是见值,对我们是名字之间对吧,那我们这块比如说。写上学习原地对吧,然后我们这里边URL便秘的HTTP,嗯,HTPS冒号3w.R k.com。
05:04
嗯,我们对象我们还是分开写,这样看起来舒服一些啊,不然写的一行写太长了,因为它是允许我们敲开的,对不对,那比如说slogan。成就自己的,只需一套精品。这样。那便利对象和我们这样的便利方式是一样的,我们把这个去掉,你看我们把这个地方。那这个地方咱先不变啊,你建议用IM,后期我告诉你,这里边一般都用对象里边的ID什么之类的啊,啊用用这个呢,也不太准确,因为它有内容有相同的,那我们这块不是变列表了,是便利对象,OB这块变成obj这个对象,那同样我们自己生明一个IM。那在ATM什么呢?那你看便利对象和数组不一样,对象里边有键和值,有键和值,有键和值对不对?那我们便利的IM是键呢还是值呢?是见呢还是直呢?看一下这K先放着啊,K我们后边再单独的讲啊,它比较稍稍麻烦一些,你看便离出来了,这是什么?便利出来的是直对吧,但是我们便利对象有的时候也想要什么,要这里边的K借,那怎么办?那我们一样加个大括号。
06:15
加个大括号,后边第二个K就能把我们的下标给我们取出来。对吧,这标写出来,但是我们这块是呃,ES的那个给我们提示的什么,我们声明这个,但是我没用到对不对,没用到你声明它干嘛,但是我们用一下这个错误就没有了。你看,然后我们在这块下标,这块加一个放线,在这块加上什么K。的name对吧,这个值ul这个做出来了,但这块你可以是冒号,没关系啊,中间你自己加什么都可以,对吧,咱只是展示出来,告诉我们对象是可以变成内容这个的,那我们对象能不能便利出什么呢?对象里边需不需要?呃,序列号呢,如果需要序列号B项里需要序列号的话,也是可以在这块再加个index的,在后边记着的顺序index,当然现在也提示我这个inex没有用上,对不对,那我们在这块。
07:06
加上这个,这里边儿我们加上。代你看012,当然了,我们想要它从一开始123也是可以的,这就是便利对象的方式,便利对象方式当然了,变直接字母便利对象情况不多,我们一般都变离数组,那我们还有另外一种呃方式,就是对象和数组的一个混合的写法,那是我们用的是最多的,我再给大家呃写一下啊。我们。那个边一会自己重新写吧,那我们首先声明一下,你看怎么叫对象和数组混合的,就是数组对象,这里边我们来一个,呃,假如说我们声明一个叫books,随便写了一个,你叫什么名都行,然后这是数组,数组里边呢,我们有多个对象,假如说从接口里边给我传过来的多本书的一个数据,对吧,我叫books叫什么都行,然后这里边起个ID,我们叫一,然后这里边名字我们叫做。
08:00
七说PP,然后我们这里边有个pic价钱等于是嗯79,比如说随便写是吧版现在是啊。打小广告你看。第二本书,第三本书,第四本书,第五本书这样的一个情况,然后呢,这里边我们加上,嗯,细说网页制作,网页制作。欢迎大家购买,细说加啊。所以说HTML5。高级API细说报报。咱们这边说价钱我就举,因为用账只是咱举例一下,这是一个对象数据,那就跟便利数组的方式是一样的,所以我们在这块来一个。相当于一个商品列表,对不对?U Li过来在这块,然后呢,我们在这里边加上Li便利,同样在这里边我们使用什么V-for。
09:02
微杠后这样去便利,然后我们在前边这块,这是V杠后嘛,然后我们在这里边遍利的是box对吧,然后in对吧,我们这块要什么,它的itm里边内容项和index电力数组不就这两个吗?下标和这个对不对?下标和这个,那在这个位置上我们使用的。什么了,比如说我们把这个下标也加在前面,Index点加一吧,刚才咱们一样,然后呢,这里边编辑出来这个书名,那就是it.name是这个书的名字对不对,然后呢,我们还得用什么用书的名字,然后这里边。呃,IM书的价钱比ice对吧,然后前边你可以加上一个。嗯,加上一个。这个人民币符号,人民币符号当然这里面告诉我们又没绑定K对不对,所以能把K绑定过来,在这里边加上冒号。
10:01
冒号K把K拿过来,那K通道我们把什么因把iidm有可能是呃,对象咱们一般都绑定字符块之类,对不对,里边会有一个ID嘛,这个还没用上对吧,ID是不重复的,从数据库编制出来的,所以呢,我们通常这么去绑定的是比较多的,具体什么作用到后边来说,你看这样的话就全编出来了。那全变出来,那假如说我现在想做一个呃,小的特效,再结合咱们的事件,比如说我们鼠标放上去的时候,放到哪个上面,那哪个上边呢,就给我们显示背景色,就相当于被选中的这个意思,对吧?当然我们有可能其他的方法都能做啊,那咱这块就加一个,嗯,加一个样式,加一个什么样式呢。加一个比如说活动的样式,那我们这块加一。这个啊,为什么行了,在这写吧,比如说激活T,我们加一个这个类,这个类加上我们就BK背景颜色,比如说是呃,井号FF是。一吧。四六一起找啊,然后呢,前景颜色我们把它变成嗯白色。
11:06
灰色这个背景还不会太灰,那我们比如说一打仨八八对吧,灰色的那任何一个标签如果加上这个类,它背景就相当于被选中了,对不对,那比如说我们这里加上class,加上这个类AC,你选择对吧,这是全加了,我们说鼠标放到哪个哪个添加,添加这个类对不对?所以呢,我们结合前面的知识。加上这个,那怎么做呢?那我们在这块加上一个,嗯,鼠标放上去,那我们鼠标进呗,对吧,加上鼠标进入的一个时间和鼠标离开的一个事件,鼠标一进入的时候,我们叫的是呃,显示显示背景,也就是我们叫一个外方法吧,里边起一个名字啊。嗯,记录吧,那就是OV这样的方法,那我们鼠标一离开加一个鼠标一离开加一个什么,加一个O这样的方法,那这两个方法在哪里写呢?这两个方法需要我们在这里面去写,对吧?OV鼠标一放上去,我们执行这个逗号,鼠标一离开,我们执行这个来写一下啊。
12:08
你先试一下好不好使,那你就可以这里边比说一点。对吧,然后我们这块比如说呃,离开,那我们就看T。点OG,那我们看下边鼠标一放上去的时候,你看。离开,放上去离开,放上去离开对不对?放上去离开,那我们在这里边放去离开,我们就得知道我们放上去的是哪个,离开的是哪个,所以这里边你看虽然我把这个写到了微杠负的前边,但这里边我们能不能获取到这里边in代词的变量呢?这里边能不能获取到这个in代的变量呢?那同样想知道能不能获取到这个,那我这块加上一个什么。这块做一个参数,嗯,你带。就是当前的那个,所以。这块我们加上,哎,这块我们也加上。加上啊一代不是加来鼠标一块去把清楚,你看标。
13:04
对吧,离开离开四进来进来离开离开进来离开进来,你看后边的数字是不是都大啊,说明我们是可以,虽然你看因为它是在一个元素里边吗?它会渲染成虚拟倒,然后再变成倒的对吧?在虚拟倒里边,它这里边是可以的,对吧?不一定说把这个非得写在微杠号后边你才能用,你放在前面我一样能用啊,那这样的话,我们就需要如果鼠标放上去那个我们让它添加一个类的一个事的一个属性。这里边我们就冒号加一个什么,加一个class,绑定class这个属性,那里边我们加上。这里边有一个杰森,咱说了布尔型A,如果它是真值对吧,那我们是简写的啊,是真值就会把它放到class里边,是假值就没有,那这里边它是真值是假值呢?因为我们这里边也没有判断出它哪个是真值,哪个是假值,对不对,你看这里边也没有判断它的真值是假值,所以呢,但是每一个。
14:00
每一个我们都需要加一个这样的一个样式,每一个我们都需要加一个这样样式,那怎么办呢?你看我可以在这里边我们再加一个。显示就是显示背景A,那A怎么的,我们加一个冒号,默认值都是甲。当然它是声明式的,不是盗你这种方式的,当然这种选中的背景你不用用这不一定用这种方式,我只是给你举个例子,用这种方式啊,你看默认都是甲,那这里边这个值,这里边值它用哪个呢?用这里边的,你看it TM里边有一个什么。你看有一个这个值默认都是假,就默认都不显示,那如果我想办法让数组里边这个假变成真,它不就显示了吗?对吧,我现在都是假,那因为它变的是几次,所以每个里边它都能找到这个值,你看默认都是甲,没有显示对不对,那现在。我在这里边就可以怎么着,比如说鼠标一放上去,我们就可以这么做了,做一个for循环,便利谁呢?这里边也可以便利这里边吧,O是不是可以变它呀,对吧?咱们现在用最笨的方法想,因为我想让大家看到这种什么,看到这种改变数组里边状态,它也是想式的做法也会变化,那便利这里边的咱们可以用of或者是in,对吧,这里边也可以用in of都可以啊,然后我们便利like声明一个I。
15:19
证明一个这里边我们就可以。做一个判断,如果对吧,你看这个I就是那里边儿的所有的对吧,所有的,那我们可不可以就这样,这里边的books里边的什么,这个I循环,让每一个它的事件都让它等于除,如果每一个都等于负的话,那你看嗯。这里边没有啊。提示一个错误,哎不用管,其实这个他是ES给我们提示的这个错误,说这个的这个没有用上,对不对,那我这里边,嗯,我想展示一下,嗯。行了,那我就用一下假设用一下吧,那我就直接判断了,如果谁啊。
16:02
Index等于I,便利的时候,等于我鼠标正放上去这个。如果等于这个正方上去这个,那我怎么办呢?你看一下。如果每个都等于这么放上去的这个,那我们就让这个当前的这个inex,当前的这个放进in,该它变成数,那否则其他的鼠标离开的其他的我们怎么办呢?这里边。把所有的其他的我们都变成甲,这时候就得用I了,对不对,然后变成。现在我们鼠标放去。嗯,没有定义,Act没有定义。是数据下周约定了,我们看一下。没有错。哦,咱们这块不用这个,这个生命I咱们不能用这个,因为这个是把里边的每个对象I是每个对象不是这个,所以我们这块呃用light I等于零对吧,I小于z.fo.lgth,然后I加加用这种方式。
17:06
然后把这个错去掉,看着不舒服,你看鼠标放上去它就显示对吧,离开其他的全变成不显示就可以了,当你这离开这个没用上对吧,你可以看一下,就是加上离开的那个就可以,这背景就变色了。鼠标一放上去就这样,这就是我们遍历的时候,对象和我们的,呃,数组数组对象这样的一个混合的用法,以及配合事件,但是和这个绑定属性plus这些东西一起用的啊,当然我们也可以跟衣服啊,语句什么的一起使用,这都没关系的,遇到这样的业务流程的时候,咱们再说。好,这节课我们就先讲到这里。
我来说两句