3、条件与循环

1.条件渲染的含义：

• 条件渲染指令： v-if、v-else-if、v-else
• 可以根据表达式的值在DOM中渲染或销毁元素/组件
• v-if和v-show不同点：v-if是真正的条件渲染，适合条件不经常变更的场景；而v-show只是简单的CSS属性切换，使用于频繁切换条件

2.举例

2.1 v-if举例：

v-if.png

2.2 v-else举例：

v-else.png

2.3 v-else-if举例：

v-else-if.png

2.4 v-show举例：

v-show.png

小注解

• v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。
• v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
  相比之下， v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。
• 一般来说， v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。

2.5 v-if和v-show：

v-for和v-if.png

3.作业小练习操作

3.1显示书籍

显示图书信息.png

3.2蓝墨云班课

蓝墨云班课.png