搭配使用1: v-if v-else
搭配使用2: v-if v-else-if v-else
v-if控制元素的展示与否,元素会在DOM展示或者消失
v-if可以在<template>(ps:一个不可见的包装器元素)上使用,以便控制整块元素
v-show
会在 DOM 渲染中保留该元素;v-show
仅切换了该元素上名为 display
的 CSS 属性
v-show
不支持在 <template>
元素上使用,也不能和 v-else
搭配使用
#v-if vs. v-show
v-if
是“真实的”按条件渲染,因为它确保了在切换时,条件区块内的事件监听器和子组件都会被销毁与重建。
v-if
也是惰性的:如果在初次渲染时条件值为 false,则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。
相比之下,v-show
简单许多,元素无论初始条件如何,始终会被渲染,只有 CSS display
属性会被切换。
总的来说,v-if
有更高的切换开销,而 v-show
有更高的初始渲染开销。因此,如果需要频繁切换,则使用 v-show
较好;如果在运行时绑定条件很少改变,则 v-if
会更合适。
ps:
同时使用 v-if
和 v-for
是不推荐的,因为这样二者的优先级不明显
当 v-if
和 v-for
同时存在于一个元素上的时候,v-if
会首先被执行。