00:00
大家好,我是学习原地的特约讲师高若峰,上节课我们学习了will的模板语法,事件监听,事件监听呢,和我们以前学GS的基础语法的监听,以及学解块的时候的监听,嗯,用起来都是差不多的,只是不过我们用的是will的模板里边的语法,那绑定式线监听呢,我们使用微高,当然它有语法堂的简写方法,用艾弧,那我们也处理了参数的问题,如何获取一个试件参数,以及在will里边给我们提供了一些非常好用的修饰符号,那这里边只是简单举例了几系一些比如说阻止时间冒泡的一些修饰符也可以串行在一起使用,那这节课我们继续学习,呃,没模板的语法。流程控制中的分支结构,那在我模板里边使用呢?当然我们相当于在盗墓元素中使用,也是虚拟盗墓中使用,那我们用的是什么?指令的方式也是V杠开头的指令意思一致,那还有咱们就一下V杠数,然后否则分支有这么多,那我们直接用例子来跟大家说明一下。嗯,上节课的例子我已经给你备份了,就在这里边,我们就简单的写一下,还是用这个模板,比如说。
01:06
我们来一个div的一个语句,里边来一个UR吧,你写什么都可以啊,或者是我们先先简单来一下,就比如说就div吧,然后里边你什么样式的东西不是咱们重点,咱们现在呢,是学里边的语句V2E。然后我们微杠if写完之后,这个里边需要我们写判断条件,当然是波尔型,当然不尔型呢,你直接不尔型可以,你是变量也可以,你通过与或非那种对吧,简单的表达式换算出来的波尔星值也是可以的,如果一方数,假如这是真,这里边我们就呃,比如说MSG。那是这么写,我们来一个嗯,差值MSG,这样就写让它显示,你看因为是真的,语法肯定是显示,对不对,如果变成假。你看就消失对吧,当然我们这里边只是这样判断的,那我们也可以,比如说嗯,四大于三,你看。
02:03
当然我们这样的图形里边得用什么,得用上什么变量的方式,得用上变量的方式,如果我们直接写,你看一下,你再看一下。啊,用四大于三。你看这样是可以的啊,因为咱们没有那个语法,当然这里边肯定用的我们都是变量对吧,比如说我们判断它是不是显示我们起个变量X数对吧,所以呢,我们在这里边我们再加一个,因为现在没有变量,所以它是甲,默认没有这个变量就是甲,对不对,难受,我们这会加一个TE处,你看它就是显示的,那我这会换成甲。它就消失了对吧?啊,我们这里边也可以加一个按钮。或者是一个链接都可以啊,加按钮吧,加按钮我们加上一个事件,比如说上面写上显示,然后显示和隐藏显示,或者是嗯,隐藏。当然了,我们可以按钮上的文字切换,你可以做一个方法,然后把这块也做成一个声明,一个变量,比如说这是显示的,这是隐藏,这隐藏的这一显示,对吧,我们可以去这么做是没问题的,那比如说这里边。
03:07
我们就就直接写在一起吧,显示和隐藏,自己去完成这里边的一个切换吧,用一组也可以切换显示和隐藏,那我们这块来个语法堂,可点击的时候CS点击的时候呢,我们直接让什么可以在这里边是不是直接操作这个变量啊,对不对,It show。So,如果是显示的,那我们直接如果变成假,直接相当于就相当于变把它变成隐藏了,对吧,假如默认是真,这样加默认这对吧,一点隐藏这是没问题的,那我再一点呢,还是设置是假对不对?那如果我在这块加上这个取法X数。就把本身这个变量,如果它是真值的话,取法它就变成真对吧,那它是真来的,取法就变成假,这样的话就可以相当于做了一个什么切换,隐藏显示,隐藏显示隐藏显示对不对,就可以完成我们这样的一个呃一个操作了。这是用真假值这样去判断,那我们除了有艺术语句,那我们先看一下这个艺术语句的这个元素的一个特点啊,我们打开这个包体。
04:07
打开这个,打开这个现在是显示的,你看我们这里边有显示隐藏,那现在我现在一点隐藏,你看直接给我们加了一个注释V-if,意思用这个元素给我们隐藏了,那本身的倒元素就给我们彻底删掉了,不会在这了,是这样的一个情况啊,那这点显示你看再出来。它给我们替换成一个这样的一个注释,在而TM元素里边就这个元素存在了,那我们还有一个方法,还有一个方法什么呢。那我在这块再加一个有一个跟微杠衣服很像的微胖瘦,那他那里边放的都是什么,这类似于这样的变量,那现在我们看效果。解释隐藏你看都是一样的,但是呢,获取到的元素是不一样的,我们往上做一下。我这个对一下看你看到这块啊,你看显示的时候,它两个是没有什么区别的,对不对,但是呢,我们隐藏的时候,你看V-if给我们隐藏了,而V-show还是在这块,只不过用样式给我们加了一个什么display no用样式给我们隐藏的。
05:09
而微杠if我们让他在模板里面没显示,在页面上没显示是相当于把我们整个元素给我们干掉了,而这个是用样式给我们隐藏的元素还在,所以呢,这是这两个的区别,这两个区别啊,能微范单独的一个if是一样的,你看这里边这微杠if真正的是条件渲染,因为它会确保在切换过程中,条件块内的时间监听和子组件适当的被销毁和重建,有这样的一个作用。而微阳寿呢就简单多了,不管什么初始条件是什么元素,总会被渲染,并且呢,只是简单的基于CSS进行切换。只是基于CSS过那个去切换的啊,是这样的一个方式,那这是我们显示隐藏,那显示隐藏,假如说我们现在把它复制掉,先复制一下啊。那假如我们现在换一种方法,我们做一个切换。咱们再学另外一个语法,否则的语法这个官方式我就不给你看了啊,你看我们违章if显示真的只是显示,对不对,这是显示,换掉这个吧,这是一号一。
06:10
第二。这块,那我们还有一个语法,什么语法呢?这块我们就不叫显示了,我们叫做切换。切换,然后呢,我们把这个地方换成是一行二。第二。复制下。太多了。当然这无所谓了,几个都可以,只不过让他俩看上去一变成二,二变成一,然后呢,你看这个是整个这个元素,它只能在元素里写对不对,那我们把这块再换成一个V啊,哎,否则换成否则这样的一个语句,你看现在如果是假的话,它就会到否则里边这个否则后边我们是不能传这样的的,对吧,没有标传的,因为否则就是一个什么,相当于if附与句的一个从句嘛,对吧,现在切换你看。
07:01
做一个计划。你看这两个div其实在变化的。边位。这块啊,你看啊,计划让你要重建对吧。是这样的一个情况,所以你会看到这块有一个切换的一个效果,这是否则语句不用加任何东西,跟我们流程控制里边学的是一样的,那我们除了这个非常一,那我们还可以有什么多条件分支,多条节分支,我再把这个复制一下。复制一下,然后把它注释掉是吧,我再给你写一下多条积分制。那多条件分支了,我们这块就不用这样的条件了,比如说我做我做多干钮。这块是比如说假如咱做一个学员卡。按钮一。比如说四个按钮,按钮一,按钮二,按钮三,按钮四。四个按钮,那下边呢,我们就可以写多个比句了,比如说如果我们这回就不用这个真价值了,我们做一个比如变量吧,判断这个变量的条件,假如说我们是一个呃,选项卡CRD对吧,那比如说默认是一,默认是第一个,当然你可以字串的,你叫什么名字都行啊,我只是判断一下,然后这里边我们就判断。
08:20
CARD如果等于一的时候,当然也可以用这种,并且加其他条件啊,都是可以的,和我们一付一对都是一样的,如果等于一的时候,让它执行这个,那这块我们再加上V杠什么,否则如果加这个,否则这个值CRD我们等于二的时候,我们执行这个。来切换的切换。然后我们再连接一下,如果等于三的时候,我们这块。啊,变成一行三。否则只能是两个之间切换对不对,那你加上这个,否则如果的话,你就可以一直写去了,当然了也可以再配合什么,再配合我们的这个从句。
09:01
比如说我们这块是井号。一二。那咱们就等于123不四个按钮吗?如果第四个按钮不写的话,什么都不写的话,V杠,呃,这里边写上ESE,否则我们这样最后执行下上面三个条件都不满足的时候,会执行这个条件。这样情况,那我们在这里把按钮里边我们就需要加上艾click,让这里边什么CRD等于给它附上一的值对吧?默认是一的值。来,我们分别每一个都加上。然后等于二等于三对吧,或者等于嗯19这都无所谓了,因为是否则断面去执行,那我们看一下默认按钮一对不对,那按钮二按钮三按钮四,诶按钮三这直接写按钮四了按钮三。点击按钮三按钮二按钮一是不是一个类似于选项卡对吧,按钮四咱们用到了,否则。这就是一付语句,当然了,也可以之间嵌套,之间嵌套,那之间嵌套呢,必须外层条件符合的时候才能执行里边的条件,然后这里边条件呢,跟我们其他的写法都是一样的,对吧?可以是与或非组合成的块尔氢的一个条件。
10:12
非常的简单,因为流程控制对于一个现在都学到框架的成员来说还是比较简单的,所以呢,咱们就没有细说它的一些原理的地方,只是说了没有模板的语法,以及它和微杠受的一个区别,它并不是用样式来控制的,而是直接将切换成什么呢?将我们这个呃塑道相当于给我们彻底给干掉这样的一个情况,然后再重建条件为真的时候,在重建是这样的一个情况,所以它这有这样的一个特性,大家要知道。好,谢谢大家,这节课我们就讲到这里,语法比较简单啊。
我来说两句