00:00
大家好,这节课我们来讲一下条件判断啊,在说条件判断之前,先把我们的笔记补全,归个model啊,双向绑定,数据的数据双向绑定。在有些情况下,我们需要进行一些条件的判断,来决定某一块啊,或者说某个元素是否来显示。条件判断,哎,这时候我们就要用到条件判断,那在这个啊view或者unit APP中,我们怎么来使用条件判断呢?有一个啊V-if指定啊,比如这里我们来写一个啊VIVI里面的这个内容是啊,我们的这个message,那这个message我不想让它直接显示,我想让它根据某些条件去判断,比如说当我们的这个哎判断的这个结果是出的时候,我让它来显示啊,那这个就是用到这个V-if这个指定来进行条节判断啊,那决定这一块啊,就是说显示不显示取决于这个V-if这个表达式中这里返回的这个值,如果这里返回了false,那这里就不会显示,如果返回了出,它就会显示,好这时候我们抖层来看一下。
01:14
找到浏览器可以看到这个hello Tom是显示了对吧,那如果这里是这个啊,False,那它就不会显示就没有对吧?啊,那这是这个条件判断啊意思啊。使用这个V杠啊,条件判断。决定某个。啊,内容或者啊区块是否显示。接下来我们继续来看,那如果我们在这里面去写这个true和这个false的话啊,那么就没有什么意义,对吧?那如果是false的话,它不显示,那我直接不写不就完了吗?是不是,所以这里面一般我们会去写一些表达式的一个啊结果啊,一些运算结果,或者说直接用我们这个啊变量,比如说我来使用这个flag,诶,当它的值是出的时候,它就会显示,当它只是false,它就不会显示,那这里这个值呢,为了和上面做一个区分,我也改一下啊,这里我们写个啊A。
02:15
好,接下来保存看一看效果,可以看到这个view是显示的,那如果我把它改成这个false,它的值就不再显示了啊,那定义成这个date里面的啊,这些数据之后我们就可以通过啊一些交互,比如事件或者说一些定时器去改变这个值来决定它的一个展示啊,这是我们使用啊这个。Date里面定义的这个数据的一个好处,但这里面也是可以写一些表达式的。按照我们编程的啊,常识来讲,那既然有这个V-if那是不是也有V-else呢,来形成一个if else是有的啊,那L怎么写呢?直接就写V-L就可以了。这样的话,当。它的值啊,不显示的时候它就会显示啊,就是当它不成立的时候,它就会显示,当它成立的时候,它显示它就不会显示,那这里我们来写一个回复。
03:06
好,现在啊,我们的这个flag它是一个false,也是false的话,它不会显示H5 H5会显示看看效果啊。看到了吧,好。那接下来我们这里有个点击事件对不对?我在这个点击件中来改变这个flag的值,那找到我们的修这个点击事件,那我们来修改这个啊flag特质让它等于谁呢?我们对它进行一个取法,就是当你是出的时候,我让你变成false,当你是false的时候,我让你变成出这样的话啊,那这个啊,View和这个H5就会交替显示保存,我们来看一看效果。那接下来我来点击啊这个按钮可以看到,诶,我有显示了,因有点击这个按钮对吧,改变了flag这个值,那我再点诶H5显示了,好那这个就是啊V-if那有时候还会有一些比较复杂的一个情况,就说我会有很多的一个条件啊有V啊有H5有这个HTL,那这种情况下。
04:00
哎,这里我再写下一个H啊,写个CS吧,那这种情况下我们需要啊,使用这个更多的一个判断,比如说V-if啊we港这个else if。V-L-if它里面写的也是一个条件,那这里面呢,那这个例子就不太适合用它了,我们来写一个啊啊再来一个啊写一个。来格二好让它的值一开始等于这个啊,没有,那这里面我就可以写判断,如果flag格二等等于啊为有,那就显示它,那如果就说l if flag2等等于这个CSS,哎。那我就显示这个。少一个红号。这里面我们改成单引号吧,因为最外层是一个双引号,这里我们显示单引号,那如果我们的这个flag格等于S塔S,那我就显示它,否则的话就显示H5,那我现在FLAG2是VI,那肯定是显示这个view的,那我点击之后呢,我让这个啊FLAG2。
05:11
等于这个CSS啊。接下来老师我们来看一看效果,那现在显示的是这个view对吧,那我点击之后显显示成这个3S,因为我在这个点击时间里面把这个FLAG2改成了3S,好当它的值什么都不等于的时候啊,比如说我让它改成这个啊C在这啊什么都不等于的时候,就会显示这个H5。看到了吧,啊,这个就是啊,VE-if v else if以及VE else啊,最终决定这个内容是否是显示啊,取决于这个表达式的一个结果,如果这个表达式的结果指出啊,那就条应为成立。那这个就是啊,VE港if else if。接下来我们再来写一个啊例子还是使用这个view啊,这里呢,哎,在这里面呢,我就使用这个。
06:01
啊,显示个数,然后。这里面呢,我写什么呢,写一个V杠修。这里面我来使用哪个变量呢?使用这个flag。现在啊,Flag是副,也就是说它不会显示好,那我们来看一看实际的效果是不是这样的,可以看到并没有显示对吧?那我为什么写这个维修呢?这个微岗修和微岗又有什么区别呢?我们来检查一下代码。首先看一看。在上面我们使用的这个啊,V岗秀可以看到,就是最下面这个使用的V岗秀可以看到这个啊,组件是在的,只是它有一个属性display等于那对吧,而我们之前啊,使用的if是直接就是在这里看不到组件的,那作为对比呢,我再来一个啊,在这里写一个,把上面的这个改成if啊。然后这里我来写一个。啊,If秀啊,这里是。
07:02
上面就这个,这个就写衣服吧,啊,这个写秀好让大家做一个对比来保存看一看。检查元素直接就看最后一个元素可以看到啊,有一个这个啊溴对吧,但是没有这个if,大家发现区别没有啊,它俩虽然都可以做到控制这个组件是否显示,但是V-if啊,它是直接不会在这个组件里面啊,在我们的这里面显示的啊,直接就没有这个组件啊。然而V杠秀呢,是有这个组件只是给了一个PLAY0单的这个属性啊,所以呢,我们这里要改一下,那这个V-if它决定了某个内容和区块是否挂载,我们说组件一般说这个挂载对吧。是否挂在?好,而这个微秀啊,也是用作这个条件判断啊,条件判断。是否显示?
08:04
这点大家要注注意一点啊,它们之间区别一般我们用这个v if会多一些,但有些情况下会用到这个啊,微港so。嗯,然后呢,如果我们只是想做一些简单的判断,也是可以使用这个三元运算符啊,比如说在这里我们写一个三元算符来判断这个啊,Flag是否等于这个数等于数呢?哎,我就这里输出一个显示啊,否则呢,我这里就输出一个隐藏。来看一看,哎,是隐藏的,因为它这个值这个flag的这个值是false,这是简单的一个判断,呃,这种适用于比较,就三元一闪福适用于比较简单的一些条件,那如果比较复杂的条件就是会包含很多标签的,那比如我们这个viewvo里面又嵌套了很多的这个层级,这时候你用三元符肯定就显然不合适的。所以呢,呃,这个关于这几种,哎,这三种条件判断,大家去灵活使用啊,选择自己呃适合的一个方式,一般像一个文字的简单的显示,我们用三三服会比较合适,那像这种带着标签的,那我们就使用V港一。
09:11
啊,最后再给大家补充一点内容,就是一个啊空标签的一个内容空标签啊,有时候我们在使用V-if啊,或者说we这个else的时候是不想去。啊,连带这个本身去判断的啊,那比如给大家举一个例子,我现在有有这个两个啊,有这个A有这个。B,有这两个标签对不对?那我现在想起一个判断,如果这个flag是出的时候让这两个标签显示啊,按照我们刚才的想法,你应该是,哎,每一个都加上一个对吧?但想这样是比较麻烦的,那我们可不可以用一个标签把它给包裹起来,哎,当然是可以用一个标标签把它给包裹起来了,那这时候呢,你如果写这个啊view标签,哎,当然是可以的,但是有时候你不想要外面这层view标签,哎,万一它影响你的样式怎么办?这时候我们就可以使用一个空标签啊block这个在讲小程序的时候给大家说过啊,因为我们的的UNAPP的组件规范,它是靠近小程序的,所以block在这里面也是可以使用的啊,比如这里我们就写一个啊V-if。
10:17
Flag好保存,嗯,那这里呢。把这个结尾也要改掉,要不然它会报错,下面会报错,然后这里我给它取一个法啊呃,不取反也行,我把它改成出也可以,我为了让大家看到这好,这时候A和B就会显示,对吧?来看一下A和B是不是显示了,这时候我们来检查一下A和B,你会发现它外层是没有套任何标签的啊,这个block它会自动给我移除。清楚了吧?啊,那这个空标签在我们做条件判断以及这个循环的时候是比较有用的啊,大家记住,那在view中呢,也有空标签是叫这个,呃,直接复制一下是叫这个template啊。
11:00
是可以作为,就是说在view中是可以使用这个temp play的,来作为这个目标线啊,保存看看效果。来给大家检查一下,可以看到效果是一样的啊,但那个这里面呢,推荐大家使用这个block啊,因为呃,我们这个UN它组件规范是贴近于这个view嘛,对吧,那贴近于这个微信小程序的,那在微信小程序中呢,我们这个空标签使用的就是这个block,所以这里呢,我们就不写了,我们使用这个block啊,那这小节就是。关于条件判断,给大家啊做了一个简单的一个讲解,在我们真正写项目的时候,条件判断是非常实用的,会有很多地方去用的,这块大家一定要掌握熟练好,那这小节先到这里。
我来说两句