Vue-指令之v-if与v-show以及v-else（显示和隐藏-07）

（一）v-if 和 v-show

v-if 和 v-show 会根据接收 true/false 信息使得页面上元素达到显示或隐藏的效果.

• v-if：从根本上把元素给 消除掉 或 创建追加，达到隐藏或显示的效果.

• v-show:只是做了css样式(display:block/none)的切换而已.

---

语法：

<标签 v-if="布尔值">
<标签 v-show="布尔值">

一般来说

v-if 有更高的切换消耗 、v-show有更高的渲染消耗

如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

---

（二）v-if、v-else-if 和 v-else

• v-if可以单独使用

• v-if 和 v-else 也可以合作使用，实现双路分支结构

• v-if 、v-else-if 和 v-else 也可以合作使用，实现多路分支结构

语法:

<标签 v-if="布尔值">
<标签 v-else-if="布尔值">
<标签 v-else>

---

总结：

1. v-for遍历 数组/对象 小单元/下标 :key

2. v-if 和 v-show boolean值 隐藏/显示 删除/创建 css样式控制

3. v-if、v-else-if、v-else可以形成多路分支结构