条件渲染
v-if、v-else、v-else-if
v-if： 表达式为真时渲染内容
v-else： 与v-if联用 else 时展示
v-else-if： else时，在判断if是否为真
<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> Not A/B/C </div>
v-if 必须依附于某个元素，当想切换好多个或者要与v-for同时作用于同一个元素时，可以在外层加一个<template>，<template>元素不要会被渲染。
v-show
用法与v-if相同，但是 v-show会在DOM渲染中保留该元素，v-show是在切换该元素上的display的 css属性
v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用。
v-if VS v-show
v-if：
- 真实 真实的按条件渲染，切换时，条件区块内的事件监听器和子组件会被销毁与重建。
- 惰性 如果初次渲染条件为false，不会做任何事，条件区块只有首次变为true时才会被渲染。
v-show：
- 元素无论初始条件如何，始终被渲染。
使用场景 如果需要频繁切换，使用v-show ，如果运行时绑定条件很少改变，使用 v-if。
