vue实践之项目积累-----v-if、v-show、v-for

在vue项目中，不可避免的会遇到这三剑客（v-if、v-show、v-for），大部分人可能知其然不知其所以然，因此特花一篇文章来说明

---

v-if

这是一个条件表达式，与之搭配的是v-else,通常用于组件的显示与隐藏中。v-if 在隐藏时会直接移除那个元素，显示时则会重新创建一个新的元素。当初始条件为真时，才会开始渲染，除此之外，不会渲染

---

v-show

顾名思义，这就是用来显示某一个组件的，其效果在v-if应用于组件的显隐中时相同。区别是v-show是隐藏dom元素，相当于给原来的dom增加一个“display：none”的样式，不会直接移除这个元素。

v-show不支持<template>元素，也不支持v-else；且不管条件是什么，v-show总会在初始时被渲染，且会一直保留

---

v-for

从字面上理解，这是一个for循环（可以循环Array和Object），通常在需要循环数据中使用（比如列表类的渲染）。有一点需要注意的是v-if与v-for不能同时使用在一个元素上，v-for 具有比 v-if 更高的优先级，v-for中不能写v-if。

v-for 的默认行为试着不改变整体，而是替换元素，迫使其重新排序，