条件渲染

• v-if="xxx" 当表达式为 false 时，不展示的 DOM 元素直接被移除，适用于切换频率较低的场景 (管理系统的权限列表)；配合 v-else 使用；
• v-show="xxx" 当表达式为 false 时，不展示的 DOM 元素隐藏，display: none 适用于切换频率较高的场景 (前台页面的数据展示)；
• xxx 表示的是一个表达式，可以求出一个值，判断这个值是 true 或 false，当他们的表达式为 true 时则显示；
• v-if 一般和 template 搭配使用，在一个 template 标签中使用 v-if；因为 template标签不影响结构，在解析时会被移除；

当 v-for 和 v-if 同时使用的时候，v-for 的优先级更高，会导致 v-if 重复运行在每个 for 循环中，会重复操作 DOM。（vue3 中 v-if 优先级更高）

1. 如果循环内部没有条件判断，则用 template 标签包裹 v-for，在外面进行 v-if 判断；

2. 如果循环内部有条件判断，则用计算属性提前过滤掉不需要显示的项（就不需要 v-if 了）