00:00
哈喽,各位小伙伴们大家好,那接下来啊,咱们呢,去完成F组件的显示与隐藏的业务。那咱们呢,先看一下咱们的项目。首先说对于home下,也就是说我是首页,那么它的底部呢,是有foot。以及如果你进入到了色,也就是我是搜索页当中,那么底部的也是有特组件。以及进入到登录或者是注册的时候啊,要注意它底下的是没有的。那所以说啊,咱们也做一下笔记,比如说F组件。在home首页。还有啊,Home home home,还有search当中。它呢是显示的,比如说显示咱们的组件。但是要注意一件事,组件在登录或者是注册的时候是怎么的,是隐藏的,消失的。
01:10
那其实啊,咱们接下来是要实践一件事。就是让一个组件显示或者是隐藏。那么显示或者是隐藏组件,那我相信你你应该想到了一个指令,可能是V-if也有可能是啥呀,是V杠受。那么他们两者啊,当然使用谁更好一些呢?V杠受因为什么呢?因为V-if它是操作到在节点数上是真有还是真没有。所以说V-if呢,会频繁的操作道和耗性能。而威杠兽呢?它只是通过样式将元素经显示与隐藏。其实就是迪斯为now或者是block。
02:00
所以说从性能的角度出发呢,V杠瘦呢更好一些。但是接下来的一个问题是什么呢?如果说用微刚受,那他需要的是一个布尔之真或者是假,那也就是说我们需要找到一个条件,让底下的这个foot时而显示,时而不显示。那依据什么呢?那首先说打开咱们的开发者工具,你看一下。就比如说当前是home路由啊,那咱们呢,可以看一下子,在组件的身上,它是有一个显示数据的,叫做download root。它可以获取到当前路由的信息。就比如说你当前是哪一个路由,比如说是后,那当然如果你跳到了设置,那你看也是能拿到路由信息的。比如说派。那即登录啊和注册他都能拿到相关的路由的信息。
03:03
那有的同学可能会想到老师,那我知道了根据什么判断了,也就是说如果你这个路由是home,或者是设置OK我显示,那如果是登录或者是注册,OK,我不显示。那这样判断行不行呢?还真可以。咱们呢,可以回到咱们的入口文件,那也就说在这里咱们做一下笔记。在后。或者是home,在home或者是search下,它是显示的。那么在登录或者是注册的时候,它是隐藏的。那么我们呢,可以通过V杠受去控制着咱们这个组件的显示与隐藏。就比如说,那么如果你的Dollar root。点P,咱们刚刚看到了pass,对不?如果等等于杠谁呢?Home OK你显示,那或者你的Dollar root,第2PASS等等于谁呢?比如说等等于杠谁呀,这个search OK,那你也是显示的。
04:14
那所以说只有等于home啊或者色的时候才为真,那你就显示那其他的路由OK,不显示。那咱们呢,可以看一下的,你看啊,那如果说你是首页OK,那是有foot的,如果你是搜索页OK,它也是有foot特,但是登录注册它就没有了。那么用这种方式去判断可不可以呢?可以,这块老师也做一下笔记。6.1。那么我们可以根据啊组件身上的Dollar root。获取,哎,获取。当前路由的信息,那么通过路由的路径啊去判断foot,哎,F o foot的显示与。
05:08
隐藏。其实这样的是可以的,但是你要注意一件事。那假如说咱将来的路由组件还有很多,比如说还有100个,那假如说还有100个还要显示,那你这里面的写法那就很恶心了。对不,你还要获获多少个,100个,那也就说这一行可能都放不下了。所以说这种方案呢,不是咱最终的解决方案。那这里面呢,老师呢,要说一下的,咱们利用什么可以解决呢?利用的是路由的原信息。咱们呢,可以看一下的vuee的一个官网,咱们可以看一下VE。对吧,找一下VE官网。在他的这个v router当中啊,是跟路游相关的。有一个东西呢,叫做路由原信息。
06:00
看这。也就是说在你定义路由的时候啊,可以配置mate字段,而字段呢,就是路由源信息。咱们可以看一下,就比如说它底下举了一个例子,在配置路由,那么在子路由这儿啊,它加了一个M的属性,它的值是一个对象,而这个对象里边你可以书写你自己定义的K和V值。对不,那所以说咱们呢,可以怎么办呢,可以这么办。找到咱们的路由,因为咱当年是在这儿配的路由嘛。就比如说CTRL,就比如说home,那咱们给它加一个路由原西西M,比如说将来展不展示咱们的这个foot OK是true,那我让他展示。那以及还有谁呢?以及还有咱们的这个设置,那我也给他添加个路由语言信息。比如说show等于true,那以及登录注册不显示,那咱就给他来相应的什么呀,False。
07:06
那老师为什么选择布尔值呢?因为V杠受它需要的就是一个布尔值。那这回咱们刷新,你看一下子,咱们随便找一个路由组件。你可以看一下,那么这个路由组件的身上就有了mate这样的一个属性。受的值为什么为触?比如说后,你看是不是为触,那如果是搜索,你看它是不是也为触。那如果是登录你再看一下,哎,当然看这啊,如果是登录你再看一下。这老师给他刷新,如果是登录你再看一下的,它是不是就是false了。而且呢,也是作为组建实力身上的Dollar root的一个属性。那所以说咱们这里的判断就方便了,就是we show根据当前路由的信息root.m第二谁呢?Show进行判断。
08:04
那如果你当前的路由当中,它的这个值是真OK,我就显示,如果是false OK,我就不显示,那这样写起来更方便一些。所以说咱们可以看一下的登录注册是没有福特,而首页和搜索是有的。对吧,但是有的同学可能会胡想说,老师,那这个里面是不是可以自己随便写,比如说咱来一个,我来个二哈。对不二哈,为什么呢?咱就来个二哈,那你看你瞎写行不行。对,比如说那咱们可以看一下,你看有二哈的属性是没有。这里呢,要注意一件事,这里面所书写的是一个配置对象,那也就是说它拥有的属性。它都是固定的,你不能在这里进行胡写乱写,这里要注意,所以老师呢,也做一下笔记,六点几6.2,也就是说在咱们配置路由的时候,配置路由的时候,那么可以给路由添加路由源信息。
09:11
哎,原信息,那也就是哪个字段的M的字段。而且要注意路由啊,它需要的是配置对象,那么它的K。不能怎么的,不能瞎写,胡写或者是乱写。对吧,所以说咱们最终呢,是通过当前路由的语言信息去判断的,判断咱们的福特显示与隐藏。
我来说两句