35-尚硅谷-尚医通-前端知识点-Vue-条件指令

下面我们继续来演示VE中的借款指令，咱们刚才演示了在VE中的如何绑定世界，用V杠二加上事件名称，或者说你简写成艾特加上事件名称就可以了。那我们下面再来演示VE中的另外一个指令。这个指令呢，我们叫做条件指令，或者说叫条件渲染指令，那我在里边给大家写一下。条件指令，那什么叫条件指令呢？各位可以理解为就类似于咱们Java代码中的if else的效果，而它的写法就是在里边我们加一个叫VGE。可以做到一个条件的这么一个判断。然后它除了V-E之外，还有一个对应的指令叫V-else，这各位应该好理解，就像与我们Java中的if else的效果一样，所以这是关于条件指令，那我下面就用条件指令给各位演示一下这个效果，那怎么演示呢？比如说一会儿我们这么演示，我在页面中呢，比如一会儿我就加上一个不选框。

不选框，当我选中，咱们来选一个值，当我不选中，让它再选一个值，所以咱根据不选框是做判断，如果这个值选中，我们选一个内容，如果不选中，我们显示另外一个内容，那我们下面就用V-if以及V-else把这个效果咱们做个实现，那我下面给各位来写一下。首先在里边我先复制一个页面，这页面我起个名字，我们叫这个。零五。然后咱们叫条件渲染指令。或者说叫条件指令。然后写完之后，在页面中我们写上它相应的内容，然后内容跟那结构应该说基本上是一致的，比如说首先第一个呢，我在date中呢，咱们先定义一个变量，假如说这变量名字，比如我叫这个OK了，然后它的值默认咱们来一个叫boss。

我在里边写一下，这个叫破，然后写完之后咱们下面怎么过呢，我在div中呢，按照我刚才说到的，咱们加上一个复选框。Input type等于这个叫check box。然后在里边我们加上一个叫VI model，里边加上我刚才定义这个叫OK，这咱们刚才刚说过we model什么意思？是不是咱们提到的双向绑定？当你值发生变化，这里边是会跟着变，比如我这里边当我选中这值会变，当我不选中这值就会变，所以这OK会跟着它发生变化，然后这个写完之后，咱们下面在里边我们就来做个判断，比如现在我选中显示一个内容，不选中再显示另外一个内容，那我在下面写一下，比如说我现在我就再加上一个。

Div，然后在div中呢，加上一个叫V杠，If里边加上OK，如果OK等于to，我们就选一个内容。比如说现在写上就是选中了。如果说这OK的值等于false，那我们就提示它没有选中，那这里边我们加个什么有V-if。就有什么是V-else我们就写上，就是它没有。选中。所以这样的话，咱们用V-E条件渲染指令，把这个简单效果做到了，就是通过它做个判断，判断你OK值是true还是false，如果处显示这个内容，如果false，那就显示这个内容。这大问完成了，完成之后下面咱们来看一下效果是什么样的，首先你看啊，第一次是没有选中，当我选中是不是选中了，没有选中，选中没有选中，效果是不是做到了，咱们通过V-E就完成了这么一个事件，所以大家把这个指令记住V-if条件选指令，咱们在后面的项目中肯定会用到这个东西。

是一个很重要的一个指令。给各位做了一个演示。然后这个眼之后呢，咱们把条件指令就完成了，那我们再看下一个指令。下一个指令是什么呢？它叫列表渲染，或者说叫一个循环指令，这一循环呢，就好比说我们现在在页面中，我们得到一个数组，或者说到一个集合，然后把它在页面中，我们可以做一个便利，它主要就是做这个事情，我们可以叫列表渲染指令，或者说叫循环指令。