一、v-if的实现原理

知道Vue的v-if指令不？就像家里电灯的按钮，按下去亮了，再按就看不到了。咱们可以随便控制，想让啥出现就让他出现呗！

点击`v-if`规则后，Vue马上就能验货后面的表达式是真是假。如果是真的，那这部分内容就直接加到DOM里咯；但要是假的，它就像魔术师变得无影无踪，像是从来没有来过。所以说，只要条件变了，页面自然就跟着变动！

遇到问题时，我们能通过使用v-if，用个小例子就搞定。

html
    Hello World!

简单粗暴点说，只要把那个”show“换成正确的答案，咱们的”Hello World!”就能亮瞎眼了。不然的话，它可就瞧不见你咯。

二、v-show的实现原理

<pre class='brush:vue;toolbar:false;’>

export default {
data() {
return {
show: true
}
}
}

你们肯定听过Vue里v-show那玩意儿，跟v-if类似，这可是平常挺常用的指令不过，虽然它不能像v-if那样动态地加减元素，但可以通过更改`display`属性使元素展示出来或消失。只要给定的条件满足，v-show都会根据提前设定好的`display`属性让元素显现出来；不满足的话，就把`display`改成none，这样子元素就能自然而然地藏起来！

直接告诉你，用v-show的时候，Vue会先检查一下条件到底真假，如果真的就是开始显示，例如变大字号或者展开内联。但如果不是这样，那么就算了，内容就悄悄地消失掉。这个方法特别好用，尤其是对于老是在不断变化的情况。

下面是一个简单的代码示例来演示v-show的使用：

你瞧这个小游戏多好耍！把’show’改为真的“True”，屏幕上立马出现“Hello World!”；如果换成假的“False”，那句问候语瞬间就没了哟。

三、v-else和v-else-if的实现原理

除了v-if和v-show，你还得了解下它的小伙伴们——v-else和v-else-if。合体之后，处理各种情况变得超级容易！

首先，你得弄明白v-else怎么使唤。其实就看下前头的兄弟元素有没有用到v-if或v-else-if，而且他们的条件是不是通不过。要是条件过不去（也就是说查出来的东西是假货），v-else可不就能开起来了吗？

  

    
Hello World!
  


export default {
  data() {
    return {
      show: true
    }
  }
}

到了V-ELSE-IF！这个元素可不是乱出风头的，只要老大（亲大哥）没通过v-if评测，顺便还得遵循自己那一套法则，它就能蹦出来亮个相。简单明了地说，只有老大表现不佳，我们这些小弟才有机会上场看看它表演啥。

接下来通过一个综合示例来展示这三种指令如何配合使用：

优秀

良好

达标

这点小玩意儿就是按分数给大家打个分。拿到100分？那恭喜，你是”优秀”！稍微差点的就是”良好”，刚好及格就是”达标”。

  

    
= 90">优秀
    
= 60">及格
    
不及格
  


export default {
  data() {
    return {
      score: 85
    }
  }
}

记得记住Vue里的V-If、V-Show两位兄弟，还有V-Elsea和V-else-if也很重要，这几个都是搞定条件渲染的好帮手。掌握了它们，使用Vue就更容易上手！