v-if条件渲染
v-if 用于根据条件渲染内容，条件为假时元素完全销毁。
基本用法
HTML
<h1 v-if="isVisible">标题</h1>
v-else-if 和 v-else
HTML
<div v-if="type === 'A'">A类型</div>
<div v-else-if="type === 'B'">B类型</div>
<div v-else>其他类型</div>
v-else和v-else-if必须紧跟在v-if或v-else-if元素后面。
template 上使用
HTML
<template v-if="ok">
<h1>标题</h1>
<p>段落1</p>
<p>段落2</p>
</template>
使用 <template> 可包裹多个元素而不产生额外包裹元素。
v-if 与 v-show 对比
| 特性 | v-if | v-show |
|---|---|---|
| 渲染方式 | 条件为真时才渲染 | 始终渲染，仅切换 CSS display |
| 切换开销 | 较大（销毁/重建） | 较小（仅 CSS 切换） |
| 初始渲染开销 | 较小（可能不渲染） | 较大（始终渲染） |
| 适用场景 | 条件很少改变 | 频繁切换 |
要点总结
v-if是真正的条件渲染，条件为假时元素完全销毁- 支持
v-else-if和v-else链式分支 - 可在
<template>上使用以包裹多个元素 - 频繁切换用
v-show，条件少改变用v-if
📝 发现内容有误？点击此处直接编辑