[Day 11] 条件渲染v-if、v-show

今天我们会来简单介绍v-if和v-show，并对这两者进行比较，探讨它们的差异在哪里~~

v-if

v-if昨天其实有提到一点点，它其实就是用於条件性的渲染内容，这个内容只会在指令表达式返回真值的时候被渲染。
还有几个通常会和v-if一起用的指令:

• v-else:前面必须要有v-if或v-else-if
• v-else-if:前面必须要有v-if或v-else-if
  接着来看他们三个的例子吧~
  
  这个例子是说如果 type等於“A”，就会输出 ‘你选了A对吧’，以此类推，如果选ABC以外的东西，像是false，就会出现 ‘为什麽不选A\B\C’，概念很简单对吧!!

v-show

再来看看这个和v-if概念有点相似的v-show，用法其实大同小异，不同的点是带有v-show的元素始终会被渲染并保留在DOM中。v-show只是简单切换CSS property ，并判断它的真值。来个小例子呗~~

判断cute的真值来显示 ‘你超可爱’这句话，非常简单的小例子!!

比较v-if和v-show

这两者的差异有个最明显的差异就是有无else，在使用方面如果有其他条件就使用v-if，不然其实v-if和v-show是一样的。
在HTML渲染方面，v-if是有条件式的渲染，若条件为true才会渲染，而v-show则是一直都在渲染，若碰到真值就会显现出来，没有的话就隐藏(inline style css)。
也就是说v-if在切换的时候开销比较大，v-show在初始渲染的时候开销比较大，所以，如果要一直频繁切换用v-show比较好，如果没有用v-if比较好。

结语

今天的内容很平易近人吧~!是不是突然觉得Vue又变可爱了，但这真的是错觉，後面可是越来越可怕呜呜╯︿╰