今天来讲条件渲染(Conditional Rendering)，也就是可以依照条件变化改变渲染元素的 Directives，会举例让大家知道v-if跟v-show分别是怎麽运作的，还有比较他们的不同，那我们就gogogo吧ε=ε=ε=(~￣▽￣)~

v-if

v-if指令用於条件性渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
举一个简单的例子:

<div id="app">
    <div v-if="hello">Hellow Vue!</div>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            hello:true
        }
    });
</script>

我们宣告一个hello的判断值，当hello是true的时候，<div>Hellow Vue!</div>会被渲染到画面上。

当hello是false的时候，<div>Hellow Vue!</div>会变成 ，由此可知当 v-if 的判断不符合时，此元素不会被渲染在页面上。

v-else-if 、 v-else

使用方式跟我们以前学过的if、else if、else的用法一样!

• v-else-if 前面需要有兄弟元素v-if、v-else-if
• v-else 前面需要有兄弟元素v-if、v-else-if

底下这四个div是否会被渲染到画面上取决於type的值，如果 type等於“A”，就会输出 A，以此类推，但若打了ABC以外的就会输出就说要打ABC(╯‵□′)╯︵ ┴─┴ 翻桌的颜文字好可爱欧

<div id="app">
    <div v-if="type === 'A'">
        A
    </div>
    <div v-else-if="type === 'B'">
        B
    </div>
    <div v-else-if="type === 'C'">
        C
    </div>
    <div v-else>
        就说要打ABC(╯‵□′)╯︵ ┴─┴
    </div>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            type: " "
        }
    });
</script>

v-show

v-show的用法和上面v-if很像，只是v-show 是使用 display:none 决定元素是否显示在画面中，元素始终会被渲染并保留在DOM中，v-show只是简单切换CSS property ，并判断它的真值。

<div id="app">
    <div v-show="hello">Hellow Vue!</div>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
                hello:false
        }
    });
</script>

当hello为true的时候，我们可以在画面上看到Hello Vue!
但当hello为false的时候，我们会看到<div>标签被加上了 display: none;的样式，所以v-show 是用 display让元素消失，并没有真的消灭元素。

两者比较

• v-if 是真正的条件渲染，因为它会确保在切换过程中事件监听器和子组件适当地被销毁和重建。如果在初始渲染时条件为 false，什麽都不会做——直到条件第一次变为真时，才会开始渲染。
  总结来说 v-if 有更高的切换开销，每切换一次就要重新渲染，不适用於频繁切换的元素。

• v-show 所条件渲染的元素总是渲染，只是简单的切换CSS display:none。v-show初始渲染成本较高，但是切换时开销不高，适用於频繁切换显示的元素。

简单来说，如果需要非常频繁地切换，则使用 v-show，如果在运行时条件很少改变，则使用 v-if 。