条件判断

条件判断使用 v-if指令

v-if指令

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

v-else指令

v-else-if 用作 v-if 的else-if块，可以链式的多次使用；v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

v-else-if

也可以使用 v-show 指令来根据条件展示元素：

v-if与v-show的区别？

在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。

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