条件渲染

@Conditional Rendering

v-if

控制 1个或多个DOM 的条件渲染：只有指令的表达式为真/返回真值才渲染DOM

可以使用 v-else 或 v-else-if 实现多个元素的条件渲染

[] 如果isAdult为真，显示成年；否则显示未成年；检查元素，发现只渲染两者之一

<div v-if="isAdult">18 year +</div>
<div v-else>under 18</div>

v-show

控制一个DOM 的条件显示

和 v-if 的不同之处在于：v-show 会在 DOM 渲染中保留该元素；v-show 仅切换了该元素上名为 display 的 CSS 属性

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适

[] isAdult为真，显示；为假，其display为none

<div v-show="isAdult">18 year +</div>

v-if：解决渲染不渲染|有没有的问题；控制单个或多个元素

v-show：解决显示不显示的问题；控制单个元素

任何使用布尔值的地方都可以使用表达式实现

[] 分析以下场景，使用 v-if 还是 v-show；并通过开发工具调试数据变化时，页面的渲染情况

场景1：根据年龄 age，显示成年和未成年；

场景2：根据积分 credit，显示会员等级