day05/上午/095-尚硅谷-尚融宝-条件渲染

好，接下来呢，我们来看后面呢，还有三个内容，一个呢是条件渲染，一个呢是列表渲染，还有一个是实力的生命周期，我们先来看这个条件渲染，首先呢，我们创建一个淋巴条件渲染的一个文件。好，然后呢，我们把戴帽呢，还是给他复制过来。好，然后接下来呢，我们在我们的页面当中呢，写一个。写一个input吧，然后这个input呢，我们让它是check box box大家都知道它是一个复选按钮啊V。V model，好，然后接下来呢，我们绑定一个值，绑定的值呢，我们先定义在这个data里面，然后在data里面呢，我们可以写一个，比如说OK，然后呢，我们写一个false啊，这个就是什么意思呢？比如说是否同意许可协议。

是否同意许可协议啊？好，我们先来看一下现在的这个页面吧。页面我看一下啊，你看他这我我没OK没写是吧写。好这样就可以了，好然后接下来呢，那我勾选上之后呢，我就同意了之后，我可能就有某一部分内容就展示出来，不同意可能就部分内容不展示出来，或者是说呢，我有一个按钮。这样吧，我写一个按钮啊。写的第二。然后这块呢，我写个dut to，然后呢，这块是下一步行吧，啊下一步。好，然后呢，我如果要是不同意这个许可协议的话，我这按钮的状态呢，我想让它是禁用的状态，这禁用状态怎么写呢，我可以给这个按钮呢，它有一个Dis able的这么一个属性，这个Dis的这个属性呢，如果它是。

嗯，存在的话，那么这个地方呢，就是禁用的啊，如果这个按钮的DC包的属性不存在的话。那么它就是启用的。那么它就是启用的，明白吧，啊好，就是这两个按钮，这是禁用的按钮，这是启用的按钮，所以呢，我的想法呢，就是如果他没有同意这个许可协议，也就是说这个OK呢，是false，那我们呢。就让这个禁用的按钮展示出来，否则的话呢，我们就让这个启用的按钮展示出来啊，所以呢，我们这个按钮它的是否展示这个值是不是取决于OK，它到底是false还是还是true呀，好，我们来看一下我们怎么样去动态的改变OK的值啊，首先呢，我们看一下这个view。

好，现在OK呢是false，那么我呢，勾选一下这个复选框，大家看OK是不是就变成数了，那我再勾选一下复选框，大家看OK是不是又变成false了，说明什么？说明当我们把一个v model。定义在一个check box类型的这样的一个复选框当中的时候，那么复选框的选中与否的这样的一个状态，它会直接影响v model的值，而且呢，V model必须是一个不值啊，True或者是false，好，那这样的话呢。我们来判断下面这两个按钮是否展示就比较容易了，我们只需要判断OK，如果为处的话，那么就是同意，如果同意的话，我们就展示它对吧，如果不同意我们就展示它好，那么我们就可以这样写，我们我把这个放下面好，上面是同意，下面是不同意，那么这块呢，我们就写VFVF啊，然后如果OK等于true对吧？好，上面的这个按钮呢，就展示啊，然后下面就是v else，明白吧，那我们来看一下。

那现在呢，是我不同意的状态，展示的呢是禁用的按钮，然后我勾一下变成同一个状态了，展示的呢就是非用的按钮了，诶这个实现起来比较容易吧？好，大家思考一下，如果你对之前的这个j query还有这个印象的话，那如果在j query当中要实现一个这样的功能的话，我们要操作do节点的，首先你必须得把你这文本框通过do的形式把它取出来，然后判断文本框选了什么，再接下来呢，你还要通过do节点的形式呢，把这个下一步按钮和这个禁用的下一步按钮都给它取出来，然后呢再去判断判断，还要修改这里面的DC的属性，那么在我们的view当中呢，就所有这个和do相关的操作都不用做了，我们要做的就是什么，就是数据绑定，你会发现代码当中我们甚至没有写一行逻辑代码啊，就定义一个数据就行了，然后在这面呢，根据不同的情况，把这个数据的不同的值绑定到我们的不同的这个页面当中的需要渲染的部分就可以了，那这里面呢。

如果想更灵活的话，要借助于一些啊，这个条件渲染的这样的一些指令，所以这个呢叫条件渲染指令啊，那同时呢，这个除了v if和v else可以实现这样的一个条件渲染之外呢，还有另外一组叫做V受。这个写法和这个写法。功能是一样的啊，我写A吧。二。

接受，这样大家能看清到底谁是谁接受，好，我们来看一下。大家看这个是没有同意，有else还有受展示出来，然后我再同意，那这个是if的下一步，还有受的那个下一步，对吧？啊，它俩有什么区别，这是我们需要重点说的内容，那怎么看它俩的区别呢？我们来看这个elements这个选项卡。在elements选项卡当中呢，我们还是选择左上角这个箭头，然后选中其中一个按钮就行了，我们定位到这几个按钮这啊，那么大家现在可能就会发现有一个问题，就是我们在源代码当中呢，一共写了四个按钮1234，但是在这个地方呢，它只展示了三个按钮123，对吧？并且呢，其中有一个按钮，它给我动态的加了一个叫做display等于none的属性，而这个按钮是属于谁的呢？是属于这个受的。啊，是属于瘦的，也就是说如果我们用这个受的方式来展示和隐藏数据的话，那么它的展示和隐藏数据的方式呢，就是把这个数据给你隐藏起来，或者是把这个数据直接给你啊展示出来，那么它的具体的做法呢，就是加一个style等于none，当加上style display等于none的时候，它就是隐藏的，当不加的时候，它就是展示的，所以这个是show啊，对于动态展示页面当中内容的一个处理方案，就隐藏展示，隐藏展示啊，还有if if这一块大家看啊，我把它勾一下。

勾下之后呢，大家会发现那个。叫做else，你看原来这个按钮叫下一步对吧？啊。我勾上那个叫做下一步else的按钮不见了，取而代之的是下一步if。啊，所以呢，你会发现这个if和else，它的做法是什么呀？叫删除创建，删除创建。明白吧，啊，所以呢，当我们做动态切换的时候，它具体的一个切换的一个底层原理呢，是删除节点和创建节点，好然后这个呢，它的具体的一个原理呢，是隐藏节点和什么呀，闪展显示吧，显示节点，所以它的区别就有了，删除创建比较耗性能。

啊，然后隐藏展示。比较耗内存是不是啊，因为你这些节点都是要事先都要创建出来，然后整个的存在内存当中，然后需要的时候呢，就隐藏展示，隐藏展示啊，然后上面这个呢，不需要你需要哪个节点，你就创建哪个节点，不需要的节点呢，就就不需要创建出来，所以呢，它占用的内存空间比较少，但是呢，它比较有耗费性能，为什么？因为你每一次做切换的时候呢，都需要把原来不需要的节点删掉，在创建性节点，那这个和这个单纯的就是加一个隐藏展示，隐藏展示来切换的话呢，要性能要耗费的非常多，所以说一般情况下，如果我们做这种功能，就不断的会切换这种功能啊好，那我们呢，就用隐藏展示，隐藏展示这样的话呢，可以让它的性能最优，如果我们呢，就是统一计算出来，计算出来就就根据当前的情况，就计算出来一个结果，就展示在页面当中，也不也不会做切换，那么我们通常情况下呢，就用这个FL了，而且呢，FL还适用于那种就是你要展示的这个数据内容啊，特别。

多的情况下，比如说一个页面内容特别多，我放用FL展示，那尽量呢，就用这个这个F，而且还不切换，对吧，我就一次性的计算，计算出来一次性的展示还不切换，内容还多，那就因为呢，它会较少的占用内存啊，而且你不切换，所以呢也不会影响它的性能，明白吧，切换的时候才影响性能啊，好，然后所以呢，这是f else和受啊的这样的一个应用和具体的一个区别，以及它们的使用场景啊，这个用的时候大家灵活一点就行了，如果就是数据内容特别少的话，那你其实用哪个都行，就不涉及到这个特别大的内存的占用，然后呃，用户量也没有，其实这个那个就是本地的那个javascript的，其他的这些客户端的操作呢，没有那么多啊，不涉及到太大的性能消耗的话，那么这两个就灵活选用就行了啊，好，就根据习惯选用就行了，在极端的情况下才考虑到底是要这。

这个优化性能还是还是优化内存好，这块大家要有一个了解。