00:00
好了各位,那在这小节呢,咱们来学一下view当中的这个条件渲染,顾名思义啊,就是你符合了某些条件,我再给你渲染某些东西啊,来,回到课件当中,就是1.9条件渲染,当然呢,这里面也没有给我们去准备例子,那我们就随便写点儿吧,诶,其实就是几个指令的使用啊,很简单,各位回到代码中啊,打开这个第11个啊,先不用看总结这些东西折叠起来,我呢先写一个欢迎词啊,叫做欢迎来到上硅谷,这三个字呢,想让它是动态的,我就得这么写了,然后呢,就得创建一个view实例,配置好名字好了,上硅谷右键打开瞧一下效果啊。好,在这儿接下来呢,我提需求各位,我想让这个div啊,时而显示时而隐藏,哎,说的再直白点,能进行一个显示和隐藏的切换。啊,如果是用原声去实现啊,各位都知道我可以display none是不是就隐藏了啊,我可以ibility hidden是不能隐藏,我可以让它透明度为零,是不是都能隐藏一个元素啊,哎,那在view当中呢,你不用亲自的去写这些属性啊,它给你提供了一个指令,这个指令的名字呢,叫做V-show,我觉得特别好记,各位show本身就有展示陈列的意思,对吧?然后走你这儿呢,直接写一个表达式就可以了,你比如说我写一个false,是一个为甲的布尔值,对吗?这时候你发现啊,诶,它就没了。
01:31
哎,回来,如果你写的是真哎春,那你看它就显示对不?啊说老师那就只能写这个不尔值吗?其实也不是,你可以写一个表达式,只要这个表达式呢,能够转为一个正常的布尔值就可以,你比如说我写一个一等等等三同学这表达式肯定是false,翻译成这个布尔时对吧?那所以说这个东西呢,它就没了是不?哎,那咱说说它是怎么隐藏的,各位啊,来,我重新调成,那看一下东西不见了,只是这个视觉效果上的不见,但是这个节点存不存在呢?我们去看一下各位啊,找到body,然后呢,找到这个div,你发现同学就那H2啊,它还在,只不过呢,他用这个display none呢,把这个元素给隐藏掉了,你说对吧?哎,所以说各位V-show的底层实现呢,其实就是调整display那个属性对不?那当然了,如果你在这儿不想写直接具体的这个false,或者是这个表达式,你可以这样写你一个。
02:31
A啥意思呢?它就会去下面找到这个A啊,你比如说这个A里边呢,我写了一个false,那同学诶写了一个这个false,那你说是啥意思呀,就是隐藏掉了呗,对吧,回到这儿诶它就没了啊,那如果你动态的去操作这个A,那是不是就能控制它一会儿显示一会儿隐藏了呀,来我们试试啊,我在这儿呢,收到这个VM,然后呢,来这试一下啊,刷新接下来开始写了VM.a等于圈同学是不是就显示啊,你重新给它调成这个false,那它是不是就没了对吧?哎,所以说挺简单的,各位啊,这叫做V刚收啊好了,那这样同学啊,我不在这写这A,一会儿呢,咱再做一个切换,在这呢,我先写死啊,就写一个false啊,然后把它注掉啊,我再给你来一行,在下边这写成什么呢?一等等等一,我的意思是它还可以写什么呢?哎,表达式是吧,走然后这呢,写好一个注释,诶叫做使用V杠受。
03:31
做什么呢?这个条件渲染还有一个指令啊,各位也能做条件渲染,你都聊到这个V杠瘦了,那接下来的这个指令呢,就不得不提一下了,这个指令叫什么名字呢?也好理解啊,叫做V-if判断的那个if,我还是把这H2呢拿过来走回撤啊,拿过来把它解开,然后不用V-show,我用v if是吧,也给它调为false,那这时候你发现呀,它也没了。
04:03
而且我跟你讲各位没的很彻底哦,你看一下啊走找到你的这个div wrote,你发现同学不是说结构在,然后给你display none了,而是结构压根都不在了,对吗?说老师这个是这是啥呀,这是一个空注释,你看同学这东西没了对吧,没啥东西你删了它一样的对吧?哎,所以说各位你发现了没,V-if比较狠,如果确定了这东西啊,我不想显示,那么这个结构都给你干掉是吧?哎,好了,那这块当然也可以这么写了呀,你比如说写一个这个一,哎等等等,这个一是不是写一个能转为不尔值的这么一个表达式啊,哎,那你瞧一下同学微针嘛,那就显示嘛啊对吧,好嘞,来把这个呢给它除掉,那这两个如果你学会了,我们就可以做一个简单的小交互了啊,我是这么设计的啊各位在这里呢,有一个数值,我就叫做N,它的初始值呢是零,然后在这呢,我展示一下啊,我写一个HR叫做当前的N值。
05:03
然后呢,读取一下啊走就写这N,然后下边呢有一个按钮啊button叫做点我N,然后加一,这里面呢,就得绑定一个点击事件,由于逻辑很简单,直接写了N加加对吧,各位这会儿呢,给他来一冒号走看看能不能实现啊来走走走,我多写了一个是吗?哎,把这个给它删掉好了,刷新一下啊走对吧,一直在变,然后呢,我提出需求啊,放大一点,我的要求是这样的。N等于一的时候展示一个div n等于二的时候再展示一个,N等于三的时候呢,再展展示另外一个啊来,那开始写一下呗,其实很简单啊,比如说写一个div,这个里面呢,随便我写点东西,比如说写这个angel这个框架是吧,那再来一个,这里边写谁呢?React,按照事物的发展顺序来,然后才是咱们所学的这个view对吧?同学,N等于一展示这个,你说我得咋写啊,V杠,我拿受写一下是不是可以啊,这怎么写呢?N是否等于几呢?一,那同理,这些东西给它复制,然后往这一加,往这一加,这改成二,这改成三是不是就可以了?好,来看一下效果啊各位,现在N是零,那就谁都不展示对吧?然后你看着,当我点击的时候走各位N是不是一呀?所以说呢,哎,这angel就展示了,咱说一下整个的流程啊,各位是这样的。
06:30
在这个view所管理的数据里面啊,有一个N,然后一上来呢,它是几,它是零,当你点了这个按钮呢,N就变成一了,咱之前聊过,这个data中的数据一旦发生改变,那整个这个模板需要被重新解析,重新解析的时候,它就来到了第39行,发现这个条件呢是成立的,于是乎呢,它就显示了,那下边的东西呢,你注意各位,它会依然进行判断的,诶也就是说这个绿色的框他也看一下,这个粉色的他也会看一下,但是看完的结果呢,是不符合条件,因为N是一,不是二和三,对不怎么证明他还会再往下看呢,其实很简单,你把这调成一个呗,那你这回你瞧效果啊,一上来是不是零啊走。
07:16
它E等于一,Angle react是不是都展示了呀?哎,好,来回来,这是用什么实现呢?给它改成二用V杠数实现,那么还有是吧,咱学过这个吗?V if,好了,这回呢,你再看一下来走,这是一,这是二,这是什么呢?三说老师呢,他们都能实现效果,我用哪个呢?是这样的,各位啊,如果你的这个东西啊,有很高的切换频率,就是它变化的很频繁,那么建议大家使用什么呢?V-show,因为V-show呢是节点在,它只是动态的控制一下隐藏和显示,通过那个display now,你说对吧?哎,但是v if呢,同学,如果你的东西变化的频率很高,那你想想啊,它不断的在倒们节点里面添一个节点,删一个节点,你说是不是存在一定的效率上的问题是吧?哎,当然你要说老师,我这东西切换频率高,我就用V-if有什么太大的问题吗?其实也没有,哎,就是一个,呃,怎么讲呢,哪个更好这么一个问题,对吧,各位。
08:17
哎,所以说频率高的用V杠受,频率低的用什么呢?V-if,好,那既然都聊到V-if了,还有一个东西啊,也要跟大家说一说,同学你说我们写正常JS代码的时候,是不是写过这种啊,你可以写一个if判断,紧接着你再写一个,这个叫做else if,对不?那view里的指令也是,同学你说有V-if,就也有啥V-else if对不?哎,其实也是有这个的,说老师那这个怎么用啊?同学一句话啊,原来你学JS基础的时候,这个if else if是什么逻辑?那么view里的这个V-if和V-else if,哎,也是一样的,你比如说各位,我在这儿可以这么写V-else-if,我这也写V-else if。
09:08
说老师那你这么写是什么含义啊,很简单呀,他先问一下这个条件成不成立啊,他说成立好了,一旦成立,你注意各位这一块的东西,它就不会再看了,直接从这个位置诶往下走,把这个接下来的这个绿色这位置的这个结构给它渲染明白不?其实就跟你正常你连续写三个if,我问你功能能实现不,连续写三个if if if能不能实现,能,但是如果你写的是if,然后是else if,你再写一个else if,这样的话,相对来说是不是能好一点,各位啊,你这个就是属于如果这个条件成立了,那下边的这个判不判断,判断这判断吗,也判断,但这种写法就是如果这会成立了,这会儿是不是直接略过了呀,所以说效果是一样的,你看一下啊,各位来刷新走,一就是angel了,二就是react,三就是view,对吗?各位,哎,回来说老师,那你怎么能证明说的它效率就能稍微高一点呢?其实让你这样看,各位我把这个二呢给。
10:08
成一,你瞧着N1上来是不是零,我点一下时不是变成一,那如果说它走完了第39行,发现A哟为N等于一安格了展示的,如果在这同学它依然奏效,那我问你条件是不是成立,成立的话react是不是就得出现,那你看react出不出现就得了呗,是吧,来走着看着啊,现在是零吧,我点你看安了,你发现下边这块,纵使这个条件成立,他是不是也不看了,但是如果你用的是这个都是V-if,那你瞧一下吧,各位由零变一的时候,你看angle react是不是都展示?哎,所以说同学强调一个概念啊,就是它们是一组判断,明白不?哎,就是if和else if的这么一个区别,如果说你有多个这种判断啊,反正建议大家呢,还是用一下这个V-else if是吧,哎,那既然聊到这儿了,还有一个就也得跟大家说一下,各位啊,那你说啊,有if,有这个else if。
11:08
那你说是不是还有else,所以说在V当中,各位还有一个指令叫做V-else啊,你比如说我给你写一下啊走。哎,把这个if呢给它删掉,哎说老师明白了,这就是N等于四呗,啊N等于四展示什么呢?展示一个,哈哈,哎说老师那我明白一上来呀,就什么都没有,因为前三个条件不成立是吧,然后这个条件呢,也不成立呀,哎,所以说一上来什么都没有,那你看看效果啊各位。有没有,有为啥。嗨,同学是这么回事儿,V杠,Else后边不要再跟条件了,跟也白跟,跟也不会起作用的,其实你想想同学,你写了一堆判断,你中间呢,混着很多的这个else if,我问一下谁写JS代码,最后一个else里边写条件呀,Else就是前边的判断都没有进去,那是不是走else呀,所以说各位这块你写了个N等于四没有任何作用,所以说呢,就给它删掉了啊,那这个的意思就是N等于一安格了等于2REACT等于3VIEW,那等于别的是不是都是,哈哈,那你说零是不是属于别的哎,一。
12:18
2REACT3VIEW,那如果是45678以后别的东西是不是都算哈哈呀哎,这就是V-else的一个使用,好了写上注释啊,叫做V-L。和谁呢?这个V-L-if好吧,然后值得你注意的一个点啊,是各位,如果你用这个V-if和V-else去做配合,中间不允许打断。就是这个结构得是一个整体的,这四个div要紧的挨在一起,不允许被打断,老师,啥叫打断?瞧着我给你打断一下,这写个div啊,里边写一艾特符,同学,这就被打断了。打断后边的这些就都不奏效了,前边的是奏效的啊,比如说在这儿各位,我在这儿给你打断一下一和二这个判断好用,三和V-else这块就不奏效了,他不会再判断了,说什么三不三这些东西,你看一下各位啊,一上来。
13:16
艾特福是不是就有回来,为啥艾特福有各位是因为我这是不是写的这艾特福啊,这个东西是没有任何条件限制的对不对,其实细心的同学都发现了,你这控制台是不是报错了呀,一会儿我们再看那报错啊同学你看着变一的时候,哎是不安了,你这个艾特福一直存在啊,这不在强调了它这这这有的吗?是吧,一直都在这的吗?啊一是好用的,再看二走是不是react啊,你在切三的时候,同学你发现不好用了是不?而且你看一下这个报错他说什么呢?啊,他说呀,Without是没有什么没有什么呀,没有一个合适的v if。他这也说没有一个合适的V-if,他的意思就是,哎呀,我要看看你这个结构,发现这两个人挨在一起了是合理的,你看有了V-if,你才有资格去跟我聊V-else if,对不,但是他发现这儿就不对了,说你43行往上怎么没有V-if呀,然后在这儿就报错了,那同理,下边这一行是不是也报错?哎,所以说同学,V-IF1定要是最开始使用的,OK,而且不允许被打断,是不好了,给它删掉,说老师,那我知道了,是不是还有那个V-else show啊,哎,各位,这可没有啊,只有V-if能匹配这几个东西,但是V杠是没有其他的是吧,只有自己一个孤零零的V-show OK,好,那既然聊到这儿了,那我们就可以再聊一个东西,各位啊,接下来呢,设计这么一个东西啊,说呢页面上啊有三个H2啊,这是你好是吧,然后再来一个叫做上硅谷,然后再来一个啊,比如说写个北京吧是吧,然后这三个。
14:52
H2呢,你听我说各位都是N等于一的时候,展示他们三个,请问得怎么写啊,V杠用受线啊,来怎么写N等于一是这意思吧,各位啊,那这会儿呢,给它删一下啊,是北京好来瞧一下效果啊,一上来是零肯定不展示,一旦变成一,这三个是不是都出来啊?但是各位啊,你想想这么写是不是有点麻烦呢?
15:18
那你看我得写一个判断,一个判断一个判断,这些是不是都是一样的呀?那你说有没有一个更好的办法呢?说老师有啊,我把这瘦呢给它改成if,各位你这只是换了一个指令,你这些判断不是又重复写了三遍吗?是我知道你功能能实现对吧?啊,但是咱说你这写了多次,哎,有些同学呢,就想起来老师啊,可以这么做,把他们三个呢包在一个div里。对吧,我不给每一个人去加这个条件啊,在这儿呢,调一下这摁住out就能选中多行啊比较方便来说老师我就正常写,我给这div来一个V-show,然后我这么写N等等于一老师这不就解决了吗?哎,其实这也是一个解决的路子,你说对吧?哎看一下走是不?哎那你把它变成谁也是一样的呢,是不是V刚if呀,来走是不一样的,但是各位你这么写啊,就有一个小小的啊这么一个美中不足在哪呢?你破坏的结构。
16:18
各位你想想啊,人家之前呢是只有三个HR,你为了实现这个效果,你非要在人外边是不是包1DIV呀,那你说这是不是对结构的一种破坏呀,当然我得这么说,对结构的这种影响啊,其实可以通过样式去把它怎么办呢?给它消化掉对吧?你就比如说我原来写了某些结构给HR上样式,由于你包了这div呢,导致呢,我的这个CSS选择器拿不到这些HR了,那可能就会造成一系列的问题,那你改一下CSS代码不就得了吗?是吧?哎,那我们其实有一个更好的办法,各位更好的办法你听我说啊,就是不用这个div。那这样我先带大家呢,看一下这个结构,右键检查,你瞧正常来说我只要有这三个HR,你这个div,我问一下是不是你很被动的把它包上去的,哎,还有个更好的选择就是这样做,各位啊,你看着别写div了,写这么一个词,Tempate template有什么意思,模板的意思,Template最大的一个特点就是不影响结构,你表面写的时候用template对这些HR呢进行了一个包裹,等最终这个页面渲染的时候,同学它会把粉色框的东西呢给它脱掉就没有了,那这时候你看一下啊,我也能够实现切换的效果,但是当他们展示出来的时候,各位你瞧结构是不是没有破坏,诶,这就是template的使用,但是值得你注意的是各位这个template只能配合V-if,不能和V杠受配合起来使用是不可以的啊,说老师我试试你瞧吧,我都没有点呢,N都不是一,这些东西是不是展示出来了呀。
17:57
是吧,各位,哎,好了,那这会儿呢,给它改成正确的啊,叫做V-if好了,写好一个判断叫做V-if与谁呢,这个template。
18:09
哎,然后叫做的配合使用,好,那我们整体总结一波啊各位在这儿呢,条件渲染有两个指令啊,一个是V-if,当然它可以配合l if,还有else,适用于切换频率比较低的场景,为什么呢?因为它很暴力啊,不展示的盗墓元素就直接被移除掉了是吧?哎,注意就是v if可以和这两个人一起使用,但是结构不能被打断,那V杠受呢,写法就是V杠受等于一个表达式,适用于就是频率比较高的这么一个切换场景,对吧?他不去暴力的去动你这个盗墓数,只是说给你做一些样式上的隐藏对吧?哎,然后这有一个备注,各位,就是说你使用V-if的时候啊,元素可能无法获取到。而你使用V-show呢,一定能获取到,说老师这什么意思呢?同学,你就比如说啊,就最上边这HR呢,我用这个V-show啊,我去给它隐藏一下,你比如说写一个false,各位都知道在页面上啊,它没了,但是我想问各位的是,如果我在拿这个节点的话,你说能不能拿到呢?其实是可以的,对吧,各位,但是如果您这使用了V-if,你再想拿这标题,就容易出现一个情况,用户点了一些按钮,进行了一些交互,最终导致这个V-if等于false,那我和你讲啊,各位这个东西从结构当中它就没了,你说是吧,哎,好了,那这个呢,就是条件渲染好,那这一小节呢,我们听。
我来说两句