8.条件渲染指令

目录

1  v-if v-show

2  v-if v-else-if v-else

---

1  v-if v-show

v-if与v-show都可以控制DOM的显示与隐藏

• 由于flag是布尔值，所以这里可以直接写 v-if="flag"

当flag为true的时候，v-if与v-show控制的div都会被显示出来

当flag为false的时候，他们都会被隐藏

• 如果数据是布尔值，可以点击右侧的checkbox改变true或false

v-if与v-show在视觉效果上是一样的，但他们的隐藏方法不一样

v-if是这个元素直接没了，v-show使用的是display:none

如果要频繁切换的话v-show的性能更好

如果你一开始不需要展示，那么v-if的初始加载速度要比v-show更快，因为少渲染了一个元素

v-if的语义要比v-show更强，即使会影响部分性能，我们也通常会使用v-if

2  v-if v-else-if v-else