v-if v-else-if v-else
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。
v-else-if 顾名思义，提供一个相应v-if的else-if区块，必须跟在v-if或者v-else-if后，否则将无法被识别渲染，可以有多个
v-else 顾名思义，提供一个相应v-if的else区块，必须跟在v-if或者v-else-if后，否则将无法被识别渲染
我个人的理解这三者是类似于js语法中的if、else if、else的作用的，无论是从名字还是从作用上看，都具有极大的相似性，因此通过js代码的思维能更好地帮助我们去理解v-if、v-else-if、v-else三者之间的联系以及三者的作用。
v-show
v-show 与v-if类似，用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。但是与v-if不同的是，在v-show后面是不能跟着v-else-if或者v-else的。
v-show与v-if的异同
相同：
- 都用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。
差异：
- v-show后面无法跟着v-else-if和v-else
- v-show的条件渲染的实现是通过切换css的display属性完成的，在第一次渲染之后，Dom元素就会一直存在。而v-if的条件渲染的实现是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。
- v-show无论初始条件是否为true都会进行渲染，v-if当初始条件为false时不会进行渲染，只有当条件第一次为true时才会进行渲染。
由此可得，v-show的切换开销相对于v-if来说会比较小。因此可以知道二者的使用场景，当需要频繁切换时建议使用v-show，当切换不会被频繁触发时可以使用v-if。
v-for
v-for 指令基于一个数组来渲染一个列表，需要使用item in items形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名。
v-for 还可以使用 (value, key) in obj ,顾名思义value表示值，key表示值，如果作用于数组的话，可以替换为 (item, index) in arr ，其中 item 是迭代项的别名，index 是迭代项的下标。除了两个参数以外，我们还可以提供第三个参数，语法将会变为 (value, key, index) in myObject 第三个参数表示位置索引。
VUE官方建议我们在每个使用 v-for 的地方都要加上 key 以便VUE可以跟踪每个节点的标识，从而重用和重新排序现有的元素。key 必须是每个item项所特有的，即 key 必须是唯一的。绝大部分公司的开发规范也都会要求在 v-for 后要跟着 key 。
注意事项
VUE官方不推荐我们同时使用 v-if和v-for，因为二者的优先级不明显，因此如果同时使用二者的话可能带来我们预期之外的后果。因此如果我们想要对渲染的数组进行过滤的话可以在渲染区域外包一层 template ,在 template 上使用 v-for ，在 template 内部再进行 v-if 判断,或者提前对数组进行处理，将需要渲染的元素提取出来组成新数组后在进行渲染。VUE官方给出了示例:
错误用例
<ul> <li v-for="user in users" v-if="user.isActive" :key="user.id" > {{ user.name }} </li> </ul>
正确用例
提前对数组进行处理
<ul> <li v-for="user in activeUsers" :key="user.id" > {{ user.name }} </li> </ul>在外层包裹
template<ul> <template v-for="user in users" :key="user.id"> <li v-if="user.isActive"> {{ user.name }} </li> </template> </ul>
