【九月打卡】第七天 + 前端框架及项目面试

课程名称：前端框架及项目面试 聚焦Vue3/React/Webpack

课程章节：Vue3.0

主讲老师：双越老师

课程内容：

今天学习内容包括：

1. 条件判断

2. v-show 和 v-if 的区别
   

课程收获：

条件判断

• v-if：用于条件判断的指令。

• v-else：可以用 v-else 指令给 v-if 添加一个 “else” 块。

• v-else-if：用作 v-if 的 else-if 块。可以链式的多次使用。

• v-show：根据条件展示元素。

v-if 和 v-show 的区别

• v-if 是动态添加，当值为 false 时，是完全移除该元素，即 dom 树中不存在该元素。

• v-show 仅是隐藏 / 显示，值为 false 时，该元素依旧存在于 dom 树中。若其原有样式设置了 display: none 则会导致其无法正常显示。

• 一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if较好。

循环语句

• 循环使用 v-for指令。

• v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
  

课程学习截图：